获取递归角度4中的元素

Question

我有一个如图所示的组件，我使用递归生成了结构

<component>
   <div class="a">
   <component>
      <div class="a">
         <component>
             <div class="a"></div>
         </component>
      </div>
    </component>
    </div>
</component>

在组件的每个实例(ngAfterViewInit或ngAfterViewChecked(，我想获取特定于该特定实例的类 a 的元素。我不想要属于父实例或子实例的类a元素。如何获取元素？

Answer 1

你可以

使用ElementRef。你引用组件本身，然后发现它是子组件，如下所示：

import { ElementRef } from '@angular/core';
...
constructor(private elementRef: ElementRef) { }
...
ngAfterViewInit() {
    ...
    const classA = this.elementRef.nativeElement.querySelector('.a');
}

Answer 2

使用 ViewChild 单独拥有实例

@ViewChild('one') one : ComponentClass;
@ViewChild('two') two : ComponentClass;
@ViewChild('three') three : ComponentClass;

HTML 应该看起来像

<component #one>
   <div class="a">
   <component #two>
      <div class="a">
         <component #three>
             <div class="a"></div>
         </component>
      </div>
    </component>
    </div>
</component>

因此，您可以按以下方式标识console.log ngAfterViewInit

实例

ngAfterViewInit(){
  console.log(this.one) 
  console.log(this.two)
  console.log(this.three)
}