原文出处:javascript - 如何选择 *ngIf 渲染的动态元素 - IT工具网
延伸阅读:(获取动态元素的值)Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素(@ViewChild只能获取静态的固定DOM节点)
最佳答案
利用@ViewChildren ... QueryList<> 和 ngAfterViewInit() 实现;
@Component({
selector: 'my-app',
template: `
<button (click)="prop = !prop">toggle</button>
<div class="test" *ngIf="prop">
<a #button id="button1">button1</a>
</div>
<div class="test" *ngIf="!boolean">
<a #button id="button2">button2</a>
</div>`
,
})
export class App {
@ViewChildren('button') button: QueryList<ElementRef>;
prop:boolean = true;
ngAfterViewInit() {
console.log(this.button.toArray());
this.button.changes.subscribe(val => {
console.log(this.button.toArray()); //元素变化时触发
});
}
}
关于javascript - 如何选择 *ngIf 渲染的动态元素,我们在Stack Overflow上找到一个类似的问题: javascript - How can I select dynamic elements rendered by *ngIf - Stack Overflow
总结:
1、@ViewChild只能获取静态的固定DOM节点;
2、@ViewChildren可获取实时渲染的动态DOM节点元素