Angular2 ngAfterViewInit 啥时候被调用？

Posted 2023-03-13

【中文标题】Angular2 ngAfterViewInit 啥时候被调用？

【英文标题】：When does Angular2 ngAfterViewInit get called?Angular2 ngAfterViewInit 什么时候被调用？

【发布时间】：2016-06-07 13:00:37

【问题描述】：

在我的 Angular 组件视图初始化后，我需要一些 jQuery 代码来运行，以将数值转换为星星。

我将代码放在 ngAfterViewInit 函数中，但它没有做我需要它做的事情。我在函数中设置了一个断点，我看到在调用 ngAfterViewInit 函数时，我的组件的大部分 html 甚至都没有加载。没有加载的部分是使用 *ngFor 指令生成的。

在该指令生成了我需要操作的所有 html 之后，如何让我的代码运行？

【问题讨论】：

看一看：***.com/questions/15458609/…

意见：componentDidMount 是一个更简单的抽象 facebook.github.io/react/docs/component-specs.html 它只会在它被孩子调用后才会被调用。 NgFor 不是一个概念，因为您只是使用简单的 javascript [].forEach ????

【参考方案1】：

当我依赖 DOM 准备好时，我一直在使用 ngAfterViewChecked。

import Component, AfterViewChecked from '@angular/core'; 

export class Spreadsheet implements AfterViewChecked

   ngAfterViewChecked()

   

【讨论】：

在 ngAfterViewInit 失败的地方为我工作，只是因为厄运还没有准备好

请注意ngAfterViewChecked 可以多次调用。

我也一直在这样做，因为在模板的 ngFor 中加载了一些 HTML 元素后，我需要执行一些代码。显然这不是最好的解决方案，因为我现在至少有两个标志（例如 componentsInitialized、searchComponentsInitialized）来确保我只在 ngAfterViewChecked 中执行一次相应的代码。我真的很想知道这样做的正确方法是什么。

@Jort 我还在 ngAfterViewChecked 中使用了标志——因为它在初始化期间经常被调用。但是……找到了更好的方法。我使用 ViewChildren，它返回一个 QueryList。我订阅了 'changes' 属性 - 当 ngFor 完成时，ngFor 子项的 queryList 将触发 Change 订阅。我检查查询列表中是否包含所需数量的元素，然后做我需要的任何事情！

legenddddddd，虽然 Michal 是对的，但它确实被调用了几次，所以一定要添加一些额外的 null ref 检查

【参考方案2】：

ngAfterViewInit 什么时候被调用？

ngAfterViewInit() 应该在组件视图及其子视图创建后调用。我对此进行了测试，发现孩子的ngAfterViewInit()s 在父母的ngAfterViewInit() 之前被调用。

当你说“我的组件的大部分 HTML 甚至都没有加载”时，“加载”是什么意思？ HTML 是在子组件的模板中，还是通过其他方式加载（或生成）的？

在该指令生成了我需要操作的所有 html 之后，如何让我的代码运行？

查看指令代码会有所帮助。如果指令以某种方式生成了 Angular 模板中不包含的 HTML，那么您可能需要手动触发事件（例如，使用输出属性）以在渲染完成时通知父级。或者你可以使用setTimeout()（但这并不可靠）。

在我的 Angular 组件视图初始化后，我需要一些 jQuery 代码来运行，以将数值转换为星星。

您从哪里获得这些数值？如果它们是从服务器动态加载的，您可以在数据到达时触发事件，并在此时更新视图。

另外，为什么不编写一个将数字作为输入属性并使用NgFor 生成星号的组件？

【讨论】：

除了 setTimeout() 之外，我们还需要使用什么来确保 ngAfterViewInit() JQuery 绑定在组件视图呈现后执行..