Angular / SVG - захват ширины элемента при загрузке страницы

Question

У меня есть демо здесь

Это диаграмма D3 в угловом формате.

Диаграмма изменяет размеры при изменении размера окна, перерисовывая диаграмму с использованием шириныокна, которое фиксируется при изменении размера

@HostListener('window:resize')
    onWindowResize() {

    this.w = this.elementView.nativeElement.offsetWidth;
    this.width = this.w - this.margin.left - this.margin.right;

    d3.selectAll('.bar-opacity').remove()

    this.initScales();
    this.drawUpdate(this.data);
}

При первой загрузке страницы у меня нет ширины, потому что это происходит при изменении размера окна.

svg не имеетширина при загрузке страницы

Как определить ширину контейнера svg при первой загрузке страницы

Answer 1

Вы можете столкнуться с проблемами, потому что представление еще не было нарисовано, попробуйте переместить вашу логику в интерфейс AfterViewInit , он будет запущен только тогда, когда представление будет доступно. Кажется, это работает в предоставленной демоверсии.

export class StackedChartComponent implements AfterViewInit {

  public ngAfterViewInit(): void
  {
      this.w = this.elementView.nativeElement.offsetWidth;
      this.width = this.w - this.margin.left - this.margin.right;

      this.initScales();
      this.initSvg();
      this.drawUpdate(this.data);

      console.log(this.width);
  }
}

Answer 2

Простое вычисление ширины в качестве первых строк ngOnInit ...

ngOnInit() {
  this.w = this.elementView.nativeElement.offsetWidth;
  this.width = this.w - this.margin.left - this.margin.right;
  ...

... Кажется, чтобы исправить ширину при загрузке страницы.

Очевидно, вы бывероятно, хотите разбить эти вызовы на их собственный метод, поскольку они используются в нескольких местах.(DRY).