Question

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

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

Answer 1

还有AfterViewInit生命周期钩子，一旦组件完全初始化就会调用它。

export class AfterViewComponent implements AfterViewInit {

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

  // ...
}

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

修改1：

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

export class AfterViewComponent implements AfterViewInit {

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

  // ...
}

关于Plunkr的示例，用于说明结果：https://plnkr.co/edit/s5DDTtiaVw73QBoYuv4z

编辑2：

正如bryan60在评论中所提到的，生命周期钩子无法知道服务器事件何时发生。您可以在代码中处理此问题。

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

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

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)
    });
}

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

1 个答案: