Javascript Angular2 ngAfterViewInit 什么时候被调用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35615692/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When does Angular2 ngAfterViewInit get called?
提问by Gabe O'Leary
I need some jQuery code to run after my Angular component view has initialized to transform number values into stars.
我需要一些 jQuery 代码在我的 Angular 组件视图初始化后运行以将数值转换为星星。
I put the code in the ngAfterViewInit function, but it is not doing what I need it to. I set a break point in the function and I see that most of the HTML of my component has not even loaded by the time ngAfterViewInit function is called. The parts that have not loaded are generated using *ngFor directive.
我把代码放在 ngAfterViewInit 函数中，但它没有做我需要的。我在函数中设置了一个断点，我发现在调用 ngAfterViewInit 函数时，我的组件的大部分 HTML 甚至还没有加载。未加载的部分使用 *ngFor 指令生成。
How can I get my code to run after this directive has generated all of the html on which I need to operate?
在此指令生成了我需要操作的所有 html 后，如何让我的代码运行？
采纳答案by Mark Rajcok
When does ngAfterViewInit get called?
ngAfterViewInit 什么时候被调用？
ngAfterViewInit()should be called after a component's view, and its children's views, are created. I tested this, and found that children's ngAfterViewInit()s are called before the parent's ngAfterViewInit().
ngAfterViewInit()应该在创建组件视图及其子视图之后调用。我对此进行了测试，发现孩子的ngAfterViewInit()s 在父母的ngAfterViewInit().
When you say "most of the HTML of my component has not even loaded", what do you mean by "loaded"? Is the HTML in the child component's template, or is it being loaded (or generated) by some other means?
当您说“我的组件的大部分 HTML 还没有加载”时，您所说的“已加载”是什么意思？HTML 是在子组件的模板中，还是通过其他方式加载（或生成）？
How can I get my code to run after this directive has generated all of the html on which I need to operate?
在此指令生成了我需要操作的所有 html 后，如何让我的代码运行？
It would help to see the directive code. If the directive somehow generates HTML that is not contained in Angular templates, then you may need to manually trigger an event (e.g., using an output property) to notify the parent when rendering has completed. Or you could use setTimeout()(but that would not be reliable).
查看指令代码会有所帮助。如果指令以某种方式生成了未包含在 Angular 模板中的 HTML，那么您可能需要手动触发一个事件（例如，使用输出属性）以在渲染完成时通知父级。或者你可以使用setTimeout()（但这不可靠）。
I need some jQuery code to run after my Angular component view has initialized to transform number values into stars.
我需要一些 jQuery 代码在我的 Angular 组件视图初始化后运行以将数值转换为星星。
Where are you getting these number values from? If they are dynamically loaded from a server, you could trigger an event when the data arrives, and update the view at that point.
你从哪里得到这些数值？如果它们是从服务器动态加载的，您可以在数据到达时触发一个事件，并在那时更新视图。
Also, why not write a component that takes a number as an input property and generates stars using NgFor?
另外，为什么不编写一个将数字作为输入属性并使用 生成星星的组件NgFor？
回答by TGH
I have been using ngAfterViewChecked when I depend on the DOM being ready.
当我依赖于准备好的 DOM 时，我一直在使用 ngAfterViewChecked。
import {Component, AfterViewChecked} from '@angular/core';
export class Spreadsheet implements AfterViewChecked{
ngAfterViewChecked(){
}
}
