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>

因此，您可以通过ngAfterViewInit获得console.log个实例，您可以识别如下

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

获取递归angular4中的元素？

2 个答案: