如何在Angular 2中获取div中所有元素的引用？

Question

我有div10个HTML元素.我怎样才能获得所有这10个元素的引用并在点击时切换它们的类？

<div>
 <some-element class="hawk"></some-element>
 <some-element class="hawk"></some-element>
 <some-element class="hawk"></some-element>
 <some-element class="hawk"></some-element>
 <some-element class="hawk"></some-element>
...
</div>
<div class="trigger" (click)="detach()">Detach</div>

SCSS:

.hawk {
    display: block;
    width: 16px; 
    height: 16px;
    border-radius: 10px;
    line-height: 12px;
    cursor: pointer;
    &.mock {
        border-radius: 0px;
    }
 }

我可以通过使用jQuery轻松地完成此操作,如下所示:

detach() {
  $('.hawk').toggleClass('mock');
}

做角度的方式是什么？我尝试使用@ViewChild并访问父级,div但我无法将其添加class到所有子元素.同时改变border-radius到0px,有没有办法从一组动画10px,以0px中CSS或采用了棱角分明的动画？

Answer 1

正如@tjadli 提到的，@ViewChildren这是要走的路。但我觉得他的切换逻辑有点复杂。您可以简单地执行以下操作：

@ViewChildren('hawk', {read: ElementRef}) ref: QueryList<ElementRef>;

HTML：

<div>
 <some-element #hawk class="hawk"></some-element>
 <some-element #hawk class="hawk"></some-element>
 <some-element #hawk class="hawk"></some-element>
 <some-element #hawk class="hawk"></some-element>
 <some-element #hawk class="hawk"></some-element>
...
</div>
<div class="trigger" (click)="detach()">Detach</div>

功能：

detach() {
  this.ref.map((eleRef) => {
  if(eleRef.nativeElement.classList.contains('hawk')) {
    eleRef.nativeElement.classList.toggle('mock');
  }
 });
}

希望这可以帮助。