Angular 2 中的生命周期钩子

Question

我在我的应用程序中使用 Wijmo 网格。但网格最初并未正确显示在屏幕上。 第一列是一个复选框，该方法调用 this.flex.refresh，它实际上会刷新并可能重新渲染网格。

因此，最初加载页面时，仅显示一个带有复选框的单元格。当我单击它时，将显示完整的网格。 如果我从调用中删除 flex refresh 方法，那么它会显示所有内容。

我的假设是在渲染实际网格之前没有加载网格的 CSS。 （虽然它应该在我的 angular-CLI JSON 中有它）。

所以，我要做的是在页面完全加载时进行刷新，但我找不到可靠的钩子。

一旦一切完成，flex 变量就会被赋值。（它在构造函数或 ngInit 中未定义）。

所以，我正在尝试找到一个可靠的钩子。

我尝试了 ngAfterViewInit,ngAfterContentInit 但它在那里未定义。

如果我这样做了

ngAfterViewInit() {
    setTimeout(() => {
        this.flex.refresh();
    }, 500);
  }

然后它有时有效，有时无效。在 setTimeout 中，我大多数时候都可以找到 flex 变量，有时却找不到。所以这似乎有点不可靠。 我想知道是否有一个可以调用该方法的钩子。在页面完全初始化后调用的钩子。 AfterViewInit & afterContentInit 似乎是在初始化开始但未完成后调用的。

Answer 1

根据文档，最后一个钩子是ngAfterViewChecked。 但是你需要仔细看看这个：

如果钩子立即更新组件的数据绑定评论属性，Angular 会抛出错误（试试看！）。 LoggerService.tick_then() 将日志更新推迟到浏览器 JavaScript 周期的一圈，这已经足够长了。

wait a tick

Answer 2

您可以在ngAfterViewChecked() 中拨打同样的电话。正如文档所述，它在以下情况下被调用：

Respond after Angular checks the component's views and child views.

Called after the ngAfterViewInit and every subsequent ngAfterContentChecked().