單擊標籤時單擊監聽器 - angular2和ng bootstrap

我有以下的html代碼片段。我正在使用angular2，ng-bootstrap ng選項卡。我的問題是，如何在點擊標籤時調用方法點擊？我加了（點擊），但是我看到fetchNews（）方法在我點擊標籤時根本沒有被調用。我究竟做錯了什麼？單擊標籤時單擊監聽器 - angular2和ng bootstrap

<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>

來源

2017-05-09 Karu

你可以聲明有ngbTabTitle模板和捕獲click事件：

<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>

來源

2017-05-09 19:21:13 yurzui

感謝那些工作！ – Karu

雖然我注意到了一件事。這隻有當我點擊標籤標題時纔有效。如果我點擊標題以外的其他地方，那麼它不會識別點擊。我如何讓聽衆傾聽點擊該標籤上的任何地方而不僅僅是標籤標題。 – Karu

我更新了答案。你可以試試 – yurzui

下面應該每次都正常工作。

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>

來源

2017-12-09 15:13:46 user1752112

單擊標籤時單擊監聽器 - angular2和ng bootstrap

回答

相關問題