テンプレート要素への角2の動的アクセス

Question

私はブートストラップを持つコンポーネントを持っていますnav-tabs要素。 コンポーネントはngForで使用されているため、動的IDを持っています。 IDは、@Inputオブジェクトに依存するため、OnInitハンドラで指定されます。

すべてのタブのclickイベントにアタッチされているコンポーネントのメソッドがあります。これは、クリック順序に応じてスクロールバーとタブ要素を拡張するやや複雑なロジックを処理します。つまり、テンプレート要素にはaddClassとremoveClassのメソッドが必要です。

このロジックをテンプレートhtmlに直接実装する方法は簡単ではありません。それはあまりにも複雑です。

私は@ViewChild要素を調べましたが、クリックハンドラで動的に使用できないため、ここでは該当しません。私はコンポーネントレベルで定義する必要がありますが、その時点で私のIDはまだ与えられていません。

クリックハンドラでテンプレート要素に動的にアクセスしてクラスを追加または削除するには、どのような方法が最適ですか。

リクエストに応じて、ここではクリックハンドラのロジックを示します。概念の証明として私は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はクリックされた要素にもアクセスできるので、実際にはテンプレート変数は不要です。