タブがクリックされたときにリスナーをクリックします - angular2とngブートストラップ

Question

私は次のhtmlコードスニペットを持っています。私はangular2、ng-bootstrap ngタブを使用しています。私の質問は、タブをクリックしたときにメソッドのクリックを呼び出す方法です。 私は（クリック）を追加しましたが、タブをクリックするとfetchNews（）メソッドが呼び出されないことがわかりました。私は間違って何をしていますか？

<ngb-tab title="Active" (click)="fetchNews('active')"> 
    <ng-template ngbTabContent> 
     <table class="table table-sm table-striped"> 
     <thead> 
     <tr> 
      <th>Title</th> 
      <th>Description</th> 
      <th>Attachment</th> 
      <th>Start Date</th> 
      <th>End Date</th> 
      <th>Actions</th> 
     </tr> 
     </thead> 
     <tr *ngFor="let item of news"> 
      <td>{{item.title}}</td> 
      <td>{{item.description | ellipsis:25}}</td> 
      <td>{{item.attachmentUrl | ellipsis:25}}</td> 
      <td>{{item.startDate | date: 'MM/dd/yyyy hh:mm a'}}</td> 
      <td>{{item.endDate | date: 'MM/dd/yyyy hh:mm a'}}</td> 
      <td> 
      <button type="button" class="btn btn-secondary btn-sm" (click)="showNewsModal('active',item, true)"> 
       Modify 
      </button> 
      </td> 
     </tr> 
     </table> 
    </ng-template> 
    </ngb-tab> 

Answer 1

あなたはngbTabTitleテンプレートを宣言し、そこにイベントをクリックしてキャッチすることができます：

<ngb-tab> 
    <ng-template ngbTabTitle> 
     <div (click)="fetchNews('active')">Active</div> 
    </ng-template> 
    <ng-template ngbTabContent> 
    <table class="table table-sm table-striped" (click)="fetchNews('active')"> 
     ... 
    </table> 
    </ng-template> 
<ngb-tab> 

Answer 2

以下毎回正しく動作するはずです。働い

fetchNews(evt: any) { 
 
    console.log(evt); // has nextId that you can check to invoke the desired function 
 
}

<ngb-tabset (tabChange)="fetchNews($event)"> 
 
    <ngb-tab title="Active"> 
 
    <ng-template ngbTabContent> 
 
     <table class="table table-sm table-striped"> 
 
     ... 
 
     </table> 
 
    </ng-template> 
 
    </ngb-tab> 
 
</ngb-tabset>