javascript - 如何使用 Angular 2 正确检测计算样式属性的变化？

Question

我创建了一个 Angular 2 应用程序，其中包含一个组件，我试图相对于另一个组件的 HTML 元素定位其 HTML 元素。为了计算准确的坐标，我需要知道浏览器呈现的我自己的元素的宽度和高度。

我正在使用 window.getComputedStyle(this.elementRef.nativeElement) 来获取这些属性。我注意到，随着页面的呈现，属性不断变化，直到页面呈现完成。为了了解任何更改并调整位置，我检查了组件的 ngAfterViewChecked 方法中的值。

但是，当渲染导致新的计算样式属性时，ngAfterViewChecked 似乎没有被调用，因为我发现我的钩子(Hook)不是不再调用，即使计算的样式属性仍在变化。我假设 Angular 框架不是为了检测这种变化而设计的。

我的第一次尝试是实现 ngDoCheck Hook ，但似乎在一段时间后和计算出的样式属性具有最终值之前都没有调用这个 Hook 。我假设我还没有完全理解这个钩子(Hook)究竟应该在什么时候被调用。

我终于发现，如果我在 ngAfterViewChecked 中实现一个 setTimeout 函数，这会导致稍后再次调用同一个钩子(Hook)，即使我只传递一个虚拟对象功能如:

setTimeout(() => {}, 500);

但坦率地说，我不明白为什么会这样。 有人可以向我解释一下 setTimeout 和 ngAfterViewChecked Hook 之间的联系吗？

虽然这似乎是一个有点肮脏的解决方法:检测和处理计算样式属性更改的正确“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 ..]
 }

Answer 1

见上图here查看生命周期图。如果您在 doCheck 中的 Hook 不起作用，则 AfterViewChecked 也不会起作用，因为 doCheck 会启动 AfterViewChecked。

每次异步进程完成时，都会发生另一轮 doCheck。那会调用 AfterViewChecked，然后调用您的 updateView 函数。 SetTimout() 是一个异步过程。我怀疑上面的代码会原样无限循环。

我相信您想要的是让您在此处显示的内容的父组件使用 ngAfterViewChecked() 并调用 updateView()。探讨了该主题 here .

让两个组件协同工作的 Angular 方法是让父组件可以在子组件之间传达更改，因为父组件是可以查看子组件中发生的事件的上下文。

我个人会使用的解决方案是 EventEmitter，在未显示的组件中，在 ngOnInit() 函数中。它会通知父级它已初始化。然后，在父组件中，有一个函数调用发生在发出的事件上，告诉子组件你在这里更新 View 。