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

Question

我想选择动态创建的特定 html 元素。但是创建 html 块的“list”变量充满了 http 请求，并且 dom 没有立即加载。我想通过从 url 获取且等于列表项 id 的 id 选择元素。因此，即使我选择 ngAfterViewInit 挂钩中的元素，所选元素也是未定义的。我该如何选择？

超文本标记语言

<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

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

在模板中，在项目元素上设置模板引用变量：

<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);
    ...
  });
}

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