Как получить ссылку на все элементы в div в Angular 2?

Question

У меня есть div с 10 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');
  }
 });
}

Надеюсь, это поможет.

Answer 2

Прежде всего вместо ViewChild вы должны использовать ViewChildren

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>