Не можете получить ширину и высоту элемента через ViewChild, как это делают другие ответы? - PullRequest
Новая
       7

Не можете получить ширину и высоту элемента через ViewChild, как это делают другие ответы?

0 голосов
/ 09 декабря 2018

Итак, у меня есть компонент Angular, HTML-код которого, прежде чем набирать текст, будет просто: <svg #linechart id="chartSpace"></svg>

В попытке создать адаптивную веб-страницу с линейной диаграммой я решил установитьвысота и ширина относительно вида: #chartSpace { width: 100vw; height: 50vh; }

Затем, чтобы получить высоту / ширину для масштабирования осей диаграммы, я следовал здесь нескольким примерам переполнения стека и пытался получить элемент с ViewChild, как виднониже.Однако выполнение этого приводит к тому, что высота и ширина записываются как неопределенные.Чего мне не хватает?

Файл TS: 

import {Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@Component ({
  selector: 'app-line-chart',
  templateURL: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent implements OnInit {
  @ViewChild("linechart") elementView: ElementRef;
  height: number;
  width: number;
  constructor() {}
  ngOnInit() {
    this.blah();
  }
  blah() {
    this.height = this.elementView.nativeElement.offsetHeight;
    this.width = this.elementView.nativeElement.offsetWidth;
    console.log("height: " + this.height + " and width: " + this.width);
  }
}

1 Ответ

0 голосов
/ 09 декабря 2018

Пожалуйста, запустите blah() внутри ngAfterViewInit(), потому что представление не будет отображаться во время ngOnInit() ловушки жизненного цикла. 

ngAfterViewInit() {
    this.blah();
}

blah() {
    let dimension = this.elementView.nativeElement.getBoundingClientRect();
    console.log(dimension); // {"x":8,"y":8,"width":578,"height":163.5,"top":8,"right":586,"bottom":171.5,"left":8}
}

Для этого добавлен stackblitz код.

...