angular 4 viewchild nativeElement offsetWidth 意外更改

Question

I have a component like so:

import { Component, OnInit, OnChanges, ViewChild, ElementRef, Input, Output, ViewEncapsulation, EventEmitter, AfterViewInit } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'coefficient-histogram',
  templateUrl: './coefficient-histogram.component.html',
  styleUrls: ['./coefficient-histogram.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CoefficientHistogramComponent implements OnInit {

  @ViewChild('coefficienthistogram') private chartContainer:ElementRef;

  constructor() { }

  ngOnInit() {
    let element = this.chartContainer.nativeElement;
    console.log(element.offsetWidth);
  }
}

with a template like so:

<div class="coefficenthistogram" #coefficienthistogram style="width: 100%; height: 100%"></div>

When I first browse to the page containing the component (or refresh the page) the console logs offsetWidth as being 504, which is the right size because the enclosing div which holds this element is that size. However, when I navigate to another page then return to this one, it reports a different size (308), which does not match the container in which it resides. Further, if I navigate to yet a different page, then return to this one, it reports yet a different size (126).

The page itself does not change - the container of this component does not change size. I've verified this by in the Chrome debugger - the enclosing div has a width of 504 whether I load the page new or navigate to it from other pages.

What would cause the offsetWidth to be reported differently based on which other pages I navigate to???

I am using native angular 4 routing in the application, and I have nested/child routes. I don't know if this information is helpful or not.

Any help here much appreciated.

Answer 1

I had met the similar issue, resolved by setting read parameter

import

import { ElementRef } from '@angular/core';

ViewChild

@ViewChild(MyComponent, { read: ElementRef }) myComponent : ElementRef 

use

onClick(){
    console.log("directive width:", this.myComponent.nativeElement.offsetWidth)
}

check for meta properties on doc

Answer 2

The first issue is that you can't work with your view html in ngOnInit. You have to implements AfterViewInit interface and use method:

  ngAfterViewInit() {
    // ...
  }

In this method you can work with your html component because component is rendered and exist. Try it, i hope maybe it will help.

Answer 3

This is a common pain point in client development. It's usually recommend to implement AfterViewInit and place your code in a timeout. However I've ran into issues with this too, specifically, the kind of behavior you describe. I recommend leveraging RxJs and implementing something like the following:

ngAfterViewInit(){ interval(300).pipe(take(2)).subscribe(() => { //your code here// }); }

This gives a pretty good delay to let the view content render and also makes a second pass avoiding having to use an inefficient AfterViewChecked hack etc.