javascript - 如何选择在 Angular 中动态加载的 html 元素？

Question

我想选择一个动态创建的特定 html 元素。但是创建 html block 的“列表”变量正在填充 http 请求并且不会立即加载。我想通过从 url 获取的 id 选择元素并等于列表项的 id。因此，即使我在 ngAfterViewInit Hook 中选择元素，所选元素也是未定义的。如何选择？

HTML

<div id="wrapper">
    <ng-container *ngFor="let item of list">
        <div [id]="item.id">{{item.content}}</div>
    </ng-container>
</div>

TS

list = null;
selectedItemId = null;

ngOnInit() {
    this.selectedItemId = this.activatedRoute.snapshot.params.id;
}

getList() {
    this.http.get('http://api.example.com').subscribe(
        result => this.list = result
    )
}

ngAfterViewInit() {
    const htmlElement= document.getElementById(this.selectedItemId);

    /* Some codes that using htmlElement variable */
}

Answer 1

如果您使用 @ViewChildren 引用 HTML 元素，您可以订阅 QueryList.changes 事件，以便在元素出现在 DOM 中时收到通知。

在模板中，设置一个template reference variable在项目元素上:

<div id="wrapper">
  <ng-container *ngFor="let item of list">
    <div #itemElement [id]="item.id">{{item.content}}</div>
  </ng-container>
</div>

在代码中，使用该变量名来引用带有 ViewChildren 的元素:

@ViewChildren("itemElement") private itemElements: QueryList<ElementRef>;

ngAfterViewInit() {
  this.itemElements.changes.subscribe(() => {
    console.log("Item elements are now in the DOM!", this.itemElements.length);
    const htmlElement = document.getElementById(this.selectedItemId);
    ...
  });
}

参见 this stackblitz一个演示。请注意，如果只包含一个 div 元素，则 ng-container 不是必需的。您可以将 *ngFor 指令直接应用于该元素。