Как правильно обнаружить изменение вычисляемого свойства стиля с помощью Angular 2? ⇐ CSS

[Anonymous]

Я создал приложение 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