javascript - 如何选择 *ngIf 渲染的动态元素 (实用、赞）

chelen_jak

已于 2023-09-18 15:32:40 修改

阅读量302

点赞数

文章标签： javascript 前端开发语言

于 2023-09-18 14:26:31 首次发布

本文介绍了在Angular中，如何使用@ViewChildren和QueryList来获取由*ngIf条件渲染的动态DOM元素，对比了与@ViewChild的区别，强调了@ViewChildren适用于实时渲染的场景。

摘要由CSDN通过智能技术生成

原文出处：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节点元素