Angular 5 - 如何在使用 *ngFor 创建 HTML 元素时调用函数答案

【问题标题】：Angular 5 - How to call a function when HTML element is created with *ngForAngular 5 - 如何在使用 *ngFor 创建 HTML 元素时调用函数
【发布时间】：2018-06-28 09:19:33
【问题描述】：

目前我正在一个必须动态创建 HTML 元素的视图中工作。

我正在使用 *ngFor 指令创建 HTML 元素，该指令以数组为界。

将新对象推入数组后，我需要使用 JQuery 选择器引用新的 HTML 元素，但 HTML 元素尚未呈现。

如何在 HTML 元素准备好之后触发函数？

提前致谢。

【问题讨论】：

你能添加你正在使用的代码吗...
当您使用 Angular 时，您不应该自己处理 DOM（使用 JQuery）。你能告诉我们你想要实现什么，我们会告诉你如何在 Angular 中做到这一点？

标签： jquery angular html angular5 ngfor

【解决方案1】：

您可以在组件内按照以下步骤操作：-

1) On ngOnInit(), you can write logic which is responsible for generating dynamic HTML.

2) On ngAfterViewInit(), you can write the logic for the functionality which is responsible to be applied after HTML view is loaded.

整个逻辑是 ngAfterViewInit() 在 HTML 完全加载并且您必须对该 HTML 执行某些操作时工作。例如，您的视图有一些静态 HTML，一些外部 JS 文件正在动态地在一些 div 中创建一些 HTML 元素。因此，首先您将使用 ngOnInit() 加载您的视图，然后使用外部 JS，您可以创建 html 元素并将其动态绑定到该 div。

希望对你有帮助。

一切顺利。

【讨论】：

【解决方案2】：

正如 cmets 中所指出的，如果可以选择，您可能不想在 Angular DOM 元素上使用 JQuery。这会导致无穷无尽的混乱。

但是，您可以使用elementRef.nativeElement 访问组件的 DOM 子项。在*ngFor（或其他结构指令）的情况下，您要运行它的生命周期钩子是AfterViewChecked。此时，您知道该组件已完成绑定并呈现其内容。

结合起来，这是一个简单的小例子，只是为组件的所有动态生成的 div 着色：

import {AfterViewChecked, Component, ElementRef} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let entry of entries">
      {{entry}}
    </div>
  `
})
export class AppComponent implements AfterViewChecked {

  constructor(private elementRef: ElementRef) {}

  entries = ['a', 'b', 'c'];

  ngAfterViewChecked(): void {
    const divs = this.elementRef.nativeElement.querySelectorAll('div');
    divs.forEach(div => div.style.background = 'red');
  }

}

【讨论】：