Question

我有一个包含10个HTML元素的div。我怎样才能获得所有这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或使用Angular动画从0px到CSS设置动画？

Answer 1

首先，您必须使用ViewChildren

而不是使用ViewChild

detach() {
    this.hawks.map((elmRef) => {
       if(elmRef.nativeElement.className === 'hawk') {
          elmRef.nativeElement.className = '';
       } else {
          elmRef.nativeElement.className = 'hawk';
       }
    })
}

和您的观察孩子：

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

和你的html：

<some-element #hawk class="hawk"></some-element>
<some-element #hawk class="hawk"></some-element>
<some-element #hawk class="hawk"></some-element>

Answer 2

正如@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');
  }
 });
}

希望这会有所帮助。

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

2 个答案: