时间戳

首页 > 解决方案 > 如何在 Angular 6 的主 div 中获取每个 div？

typescript - 如何在 Angular 6 的主 div 中获取每个 div？

问题描述

我有一个 div 元素，其中包含其他三个 div。现在我需要使用 Angular 6 获取 div 中的所有 div。我正在使用它@ViewChildren来执行此操作。但我只能获取主 div 中的第一个元素。

如何获取“mainDiv”中的所有 div 元素？这是我的代码：

<div class="mainDiv" #divElements>
  <div>First Element</div>
  <div>Second Element</div>
  <div>Third Element</div>
</div>

这是我的打字稿代码：

export class sampleComponent{
  @ViewChildren('divElements') mainDiv; 
  constructor() {}
  }
  ngOnInit(){
    console.log(mainDiv);
  }
}

请指导我如何进行。

标签： typescriptangular6

解决方案

#divElements 是模板中的一个本地变量，用于在我们使用 @ViewChild('divElements') 注释的组件中获取特定的 HtmlElement。

  1. 对所有剩余的 div 标签使用 localVariable 以将它们各自的 HtmlElement 放入您的组件（或）

  2. 使用 ElementRef 的 nativeElement从 childNodes 获取它，检查下面的类以获得更好的理解

 export class AppComponent  {
    
      name = 'Angular 6';
    
      @ViewChild('divElements')
      public divElements: ElementRef;
    
      ngOnInit() {
        console.log(this.divElements.nativeElement.childNodes);
      }
}

推荐阅读