Question

如何获取对Angular Component中的元素的引用，并将其封装设置为ShadowDOM？

const element = document.getElementById(id);

例如，返回null

编辑：添加了html代码段

<div *ngFor='let item of items' [attr.id]='item.key'>
.....
</div>

我需要参考创建的每个div。

使用模板变量是可行的，但是afaik不能动态生成模板变量。

例如

<div #myTarget> ... </div>

有效

Answer 1

您的代码与ShadowDOM完全无关，并且您不应该在Angular中按ID选择元素，因为这是一种反模式。而是在您的TypeScript代码中使用the ViewChildren() selector！

class SomeCmp implements AfterViewInit {
  @ViewChildren('myItem') items!: QueryList<ElementRef>;

  ngAfterViewInit(): void {
    console.log(`I have ${this.items.length} items!`);
  }
}

<div *ngFor='let item of items' #myItem>
.....
</div>

如何在ShadowDOM中按ID查找元素？

1 个答案: