Я создал приложение Angular 2, содержащее компонент, HTML-элемент которого я пытаюсь позиционировать относительно элемента другого компонента. Чтобы вычислить точные координаты, мне нужно знать ширину и высоту моего собственного элемента, отображаемые браузером.
Я использую window.getComputedStyle(this.elementRef. nativeElement), чтобы получить эти свойства. Я заметил, что по мере рендеринга страницы свойства продолжают меняться до тех пор, пока рендеринг страницы не завершится. Чтобы получать информацию о любых изменениях и корректировать расположение, я проверяю значения в методе ngAfterViewChecked моего компонента.
Однако
Однако
Однако
em>, похоже, что ngAfterViewChecked не вызывается, когда рендеринг приводит к новым вычисляемым свойствам стиля, поскольку я обнаружил, что мой хук больше не вызывается, хотя вычисленные свойства стиля все еще меняется. Я предполагаю, что платформа Angular не предназначена для обнаружения таких изменений.
Моей первой попыткой было реализовать перехватчик ngDoCheck, но, похоже, это не так. не вызывается через некоторое время и до того, как вычисленное свойство стиля получит свое окончательное значение. Предполагаю, что я еще не до конца понимаю, когда именно этот хук предназначен для вызова.
Наконец-то я это выяснил, если реализую функцию setTimeout в ngAfterViewChecked это приводит к тому, что этот же хук вызывается снова позже, даже если я передаю только фиктивную функцию, например:
setTimeout(() => {}, 500);
Но, честно говоря, я не понимаю, почему так. Может кто-нибудь объяснить мне связь между setTimeout и крючком ngAfterViewChecked?
И пока это происходит это несколько грязный обходной путь: Каков правильный способ «Angular» обнаружить и обработать изменение вычисляемых атрибутов стиля?
Код отрывок:
export class MyComponent implements OnInit, AfterViewChecked
{
private cssWidth: number;
private cssHeight: number;
constructor(private elementRef: ElementRef, private renderer: Renderer2)
{
}
ngAfterViewChecked()
{
console.log("ngAfterViewChecked");
this.updateView();
}
public updateView()
{
const sizeX = parseFloat(window.getComputedStyle(this.elementRef.nativeElement).width) || 0;
const sizeY = parseFloat(window.getComputedStyle(this.elementRef.nativeElement.height) || 0;
if (sizeX === this.cssWidth && sizeY === this.cssHeight) {
// no change
return;
}
console.log("Change detected!");
// TODO Does not work without this dummy timeout function (else no more changes detected) - why so??
setTimeout(() => {}, 500);
[.. doing the positioning here ..]
}
Подробнее здесь: https://stackoverflow.com/questions/436 ... -angular-2
