Angular 2 - 如何确定视图何时完全解析答案

【问题标题】：Angular 2 - how to determine when a view is fully resolvedAngular 2 - 如何确定视图何时完全解析
【发布时间】：2017-11-25 15:40:37
【问题描述】：

我正在使用 Angular 2 并尝试确定 Angular 视图中的视图（在组件中）何时完全加载（绑定完成） - 当完全加载时，我需要运行一个脚本（从看法）。

我已经查看了 Angular 钩子——似乎唯一可以真正利用的钩子是 ngAfterViewChecked 但是每次相应的更改都会调用它——我需要知道视图的所有更改何时应用于视图（即在最后一次 ngAfterViewChecked 调用之后/之后）-但这怎么知道？

【问题讨论】：

您的问题需要更多详细信息，说明您要完成的工作以及原因以及您迄今为止尝试过的代码示例。

标签： angular

【解决方案1】：

还有 AfterViewInit 生命周期钩子，在组件完全初始化后调用。

export class AfterViewComponent implements AfterViewInit {

  ngAfterViewInit() {
    console.log('AfterViewInit');
    this.doSomething();
  }

  // ...
}

另见https://angular.io/guide/lifecycle-hooks#afterview

编辑 1：

你是对的，值不是一开始就设置的。据我所知，在 AfterViewInit 之后没有其他生命周期钩子（仅调用一次）。您可以使用延迟为 0 秒的 setTimeout 方法。这基本上会将方法调用推到当前执行队列的末尾，并给 angular 时间来更新数据绑定。

export class AfterViewComponent implements AfterViewInit {

  ngAfterViewInit() {
    setTimeout( () => {
        this.doSomething();
    },0)
  }

  // ...
}

Plunkr 上的示例来说明结果：https://plnkr.co/edit/s5DDTtiaVw73QBoYuv4z

编辑 2：

正如 bryan60 在 cmets 中提到的，生命周期挂钩无法知道服务器事件何时发生。你会在你的代码中处理这个。

Plunkr 示例：https://plnkr.co/edit/ZgPcl2qLEom03ZClAutT?p=preview

当数据来自服务器时，您将其分配给本地变量。如果您立即调用 printPdf() 方法，则不会更新数据绑定，因为 Angular 还没有时间检查任何更改。因此，您无需直接调用 printPdf() 方法，而是使用 setTimeout 技巧让 Angular 先更新数据绑定。

ngOnInit() {
    // This would be your HTTP method to load the data from the server
    this.loadData().subscribe((data) => {
        this.data = data;      

        setTimeout(() => {
            this.printPdf();
        }, 0)
    });
}

【讨论】：

不幸的是 AfterViewInit 在元素实际与绑定值水合之前触发
@TerrorBight 我更新了我的答案。你能检查它是否适合你吗？
ngAfterViewChecked（称为 mult.times）发生 after ngAfterViewInit - 据我所知，上面的代码对事件的顺序没有任何作用。关于“this.before”，我不清楚您的意图是什么 - 如果发生异常，您是否建议将其忽略
通过使用setTimeout，doSomething()方法会延迟一个tick。在那个时间范围内，组件的数据绑定将在调用 doSomething() 方法时更新。我的意思绝不是应该忽略该错误。我想指出的是，您不应该在不使用 setTimeout 方法的情况下在该时间范围内分配值，否则会出现此错误。在 Plunkr 示例中，我将其保留只是为了展示使用 setTimeout 确实使用了更新后的值。
@TerrorBight 在您在订阅中设置数据时，Angular 不会更新您的视图。它将在您订阅的所有方法都执行后执行此操作。 setTimeout 也将立即执行，但您在 setTimeout 中调用的方法将被推送到当前 javascript 执行队列的末尾。这样，我们可以确保在调用 setTimeout 中的方法之前完成了视图的更新。我认为这在所有支持 setTimeout 的浏览器和设备上应该是可靠的，但我只在 Chrome 上使用过它。