Угловой 2 динамический доступ к элементам шаблона

Question

У меня есть компонент с загрузочным элементом nav-tabs. У них есть динамические идентификаторы, потому что компонент используется в ngFor. Идентификаторы указаны в обработчике OnInit, поскольку они зависят от объекта @Input.

У меня есть метод на компоненте, который прикреплен к событию click всех вкладок, который обрабатывает несколько сложную логику, содержащую полосы прокрутки и расширяющие элементы вкладок в зависимости от порядка щелчка. Другими словами мне нужно что-то вроде addClass и removeClass методов на моих элементах шаблона.

Нет простого и понятного способа реализовать эту логику в шаблоне html напрямую. Это слишком сложно.

Я просмотрел элемент @ViewChild, но это не применимо здесь, так как я не могу использовать его динамически в моем обработчике кликов. Мне нужно будет определить его на уровне компонента, но в этот момент мои идентификаторы еще не заданы.

Что является лучшим и угловым способом доступа к элементам шаблона динамически в моем обработчике кликов, а также добавлять и удалять классы из них?

В соответствии с запросом, вот логика в моем обработчике кликов. Как доказательство концепции я использую document доступа, но это, очевидно, не путь.

public toggleOverflow (id: string): void 
{ 
    let i = this.endsWith(id, "1") ? 0 : 1; 

    let anyOpen = this.tabActive[0].open || this.tabActive[1].open; 
    if (!anyOpen) 
    { 
     document.getElementById(this.containerId).classList.remove("movie-info-overflow"); 
     document.getElementById(this.onTopId).classList.add("ontop"); 
    } 

    if (!this.tabActive[i].open) 
    { 
     this.tabActive[i].open = true; 
     this.tabActive[i].id = id; 
     document.getElementById(id).classList.add("scroll"); 
     if (anyOpen) 
     { 
      // close currently open tab 
      i = Math.abs(i - 1); 
      this.tabActive[i].open = false; 
      document.getElementById(this.tabActive[i].id).classList.remove("scroll"); 
     } 
    } 
    else 
    { 
     this.tabActive[i].open = false; 
     document.getElementById(id).classList.remove("scroll"); 

     document.getElementById(this.containerId).classList.add("movie-info-overflow"); 
     document.getElementById(this.onTopId).classList.remove("ontop"); 
    } 
} 

Вкладки сначала отображают часть текста, чтобы не покрывать следующие элементы в списке. Только после того, как они будут нажаты, будет показан полный текст, добавив в текст строку прокрутки (класс scroll) и установив вкладку высоко в z-порядке (класс ontop).

Как вы можете видеть, мне нужно получить доступ не только к элементу, который вызвал событие click, но также и соседний элемент табуляции.

Соответствующая часть шаблона:

<ul class="nav nav-tabs movie-tabs"> 
    <li class="active"><a [attr.href]="'#' + tabId1" data-toggle="tab" (click)="toggleOverflow(tabId1)">Description</a></li> 
    <li ng-if="movie.comments.length > 0"><a [attr.href]="'#' + tabId2" data-toggle="tab" (click)="toggleOverflow(tabId2)">Comments</a></li> 
</ul> 
<div [attr.id]="onTopId" class="tab-content"> 
    <div [attr.id]="tabId1" class="tab-pane movie-tab active"> 
     <p class="movie-description">{{movie.description}}</p> 
    </div> 
    <div [attr.id]="tabId2" class="tab-pane movie-tab"> 
     <p class="movie-description">{{movie.comments}}</p> 
    </div> 
</div> 

Answer 1

Ваш вопрос не очень понятно. Я думаю, что-то вроде

<div *ngFor="let item of items" #item (click)="doSomething($event, item)"></div> 

будет делать то, что вы хотите.
Фактически переменная шаблона не требуется, так как event.target позволит также получить доступ к элементу с щелчком.