использовать параметр для доступа к предопределенному дочернему элементу

Question

здесь, ниже, я пытаюсь использовать параметр ('selected') для вызова стиля набора с переданным параметром (строкой), например onClick ('firstheader')

Я надеюсь, что смог бы объяснить мою точку зрения

  @ViewChild('firstheader', { static: false }) firstheader: ElementRef;
  @ViewChild('secheader', { static: false }) secheader: ElementRef;
  @ViewChild('thirdheader', { static: false }) thirdheader: ElementRef;



  onClick(selected) {

    this.firstheader.nativeElement.style.display = 'none'
    this.secheader.nativeElement.style.display = 'none'
    this.thirdheader.nativeElement.style.display = 'none'



    this.selected.nativeElement.style.display = 'flex' <-- here (selected)

  }

HTML

<div class="header__bullets-container">
    <div class="header__bullet" (click)="onClick('firstheader')"></div>
    <div class="header__bullet" (click)="onClick('secheader')"></div>
    <div class="header__bullet" (click)="onClick('thirdheader')"></div>
</div>

Answer 1

Самым быстрым и неэффективным способом было бы отправить ссылку на шаблон непосредственно в контроллер и l oop через все заголовки и установить стиль.

Контроллер

headers = [];
@ViewChild('firstheader', { static: false }) firstheader: ElementRef;
@ViewChild('secheader', { static: false }) secheader: ElementRef;
@ViewChild('thirdheader', { static: false }) thirdheader: ElementRef;

ngAfterViewInit() {
  this.headers = [this.firstheader, this.secheader, this.thirdheader];
}

onClick(selected: any) {
  this.headers.forEach(header => {
    if (header.nativeElement == selected) {
      selected.style.display = 'flex';
    } else {
      header.nativeElement.style.display = 'none';
    }
  });
}

Шаблон

<div class="header__bullets-container">
  <div class="header__bullet" (click)="onClick(firstheader)"></div>
  <div class="header__bullet" (click)="onClick(secheader)"></div>
  <div class="header__bullet" (click)="onClick(thirdheader)"></div>
</div>

Обратите внимание на отсутствие кавычек в шаблоне. Мы отправляем в контроллер элемент HTML вместо строки.