如何從Angular4的引導標籤集中選擇選項卡？

我有一組動態創建的選項卡，具體取決於我的輸入數據。而我想要做的是能夠找出當前選中哪個標籤。在下面的示例代碼中，我有一個選項卡控件，在所有這些下面，我有一個按鈕，單擊時會刪除選定的選項卡。我試圖保持這個相對簡單，它似乎有些做作，但我希望它能夠說明我的意思。如何從Angular4的引導標籤集中選擇選項卡？

這裏是我的代碼：

<div class="col-md-12"> 
    <ngb-tabset *ngIf="selectedInfo" type="groups" > 
    <ngb-tab *ngFor="let tab of selectedInfo.groups" title={{tab.name}} > 
     // some stuff in the tabs 
    </ngb-tab> 
    </ngb-tabset> 
</div> 

<div> 
    <button class="btn btn-primary float-left" (click)="deleteTab()" > Delete Tab </button> 
</div> 


export class MyTabs implements OnInit { 

    selectedIfno: MyInfoClass; 

    ngOnInit(): void { 

    // init data 

    } 

    deleteTab() { 


    } 

}

所以我們可以說我想刪除當前選中的標籤。我如何知道當前選擇了哪個標籤？

來源

2017-07-25 user2477533

您可以使用角@ViewChild()獲取NgbTabset的活動標籤ID（activeId）以從HTML中檢索NgbTabset的實例。然後您可以訪問類方法中的activeId。考慮到你是我們*ngIf你可能需要爲question中描述的@ViewChild()創建一個setter。我已經更新了示例以使用setter。

HTML：

<div class="col-md-12"> 
    <ngb-tabset #t="ngbTabset" *ngIf="selectedInfo" type="groups"> 
    <ngb-tab *ngFor="let tab of selectedInfo.groups" title={{tab.name}} > 
     // some stuff in the tabs 
    </ngb-tab> 
    </ngb-tabset> 
</div>

TS：

import { Component, ViewChild, ViewContainerRef } from '@angular/core'; 
import { NgbTabset } from '@ng-bootstrap/ng-bootstrap'; 

export class MyTabs implements OnInit { 
    private tabSet: ViewContainerRef; 

    @ViewChild(NgbTabset) set content(content: ViewContainerRef) { 
    this.tabSet = content; 
    }; 

    ngAfterViewInit() { 
    console.log(this.tabSet.activeId); 
    } 

    deleteTab() { 
    // currently selected tab id 
    console.log(this.tabSet.activeId); 
    } 
}

這裏是一個展示plunker的功能。

希望有幫助！

來源

2017-07-25 19:09:52

我無法打開的功能要求做到以下幾點： this.tabSet =在@ViewChild部分內容 ....不知道爲什麼，在一分鐘，但我可以看到所有這些應該如何工作。 – user2477533

您收到錯誤？ '* ngIf'可能會阻止'@ViewChild（）'找到正在加載的元素。 –

是的，我在編譯時得到一個錯誤： '類型'ViewContainerRef'不能分配到類型'NgbTabset'。類型'ViewContainerRef'中缺少屬性'選項卡'。' 非常感謝您的幫助！ – user2477533

我建議您聆聽tabChange更改事件 - 這將允許您「截取」活動頁面更改和存儲有關當前選定選項卡的信息的所有情況。這裏是思想的草圖：

<ngb-tabset [activeId]="activeTab" (tabChange)="activeTab = $event.nextId"> ... </ngb-tabset>

和工作plunker：http://plnkr.co/edit/4vRDHgWMhcvafXhQkxEO?p=preview

打字時，我意識到，保持活動標籤自己的軌跡可能會有點的答案痛苦，我們可以將此功能添加到標籤本身。隨時https://github.com/ng-bootstrap/ng-bootstrap/issues

來源

2017-07-25 19:49:09

如何從Angular4的引導標籤集中選擇選項卡？

回答

相關問題