將 mat-tab 動態添加到包裝的 mat-tab-group

Question

我的最終目標是創建一個可重用的mat-tab-group組件，該組件添加了一些功能以能夠關閉所有選項卡。 我在這里找到了執行此操作的技術：

https://stackoverflow.com/a/53818913/811277

我的下一組是包裝功能，以便它可以變成一個可重用的組件。 我嘗試使用此處找到的技術：

Angular 材料標簽不適用於包裝組件

最后，我無法創建一個空的MatTab組件來插入我的 MatTabs 列表的開頭。

我為此創建了一個 StackBlitz：

https://stackblitz.com/edit/angular9-material-baseline-nns7wc

  public ngAfterViewInit() {
     const matTabsFromQueryList = this._allTabs.map((tab) => tab.matTab);
     const list = new QueryList<MatTab>();
     // Create & Prepend a new MatTab here?
     list.reset([matTabsFromQueryList]);
     this._tabBodyWrapper._tabs = list;
  }

我希望在上面的代碼中只創建一個 MatTab 組件，但這並不像說new MatTab();這樣簡單。

Answer 1

我通過更深入地查看包裝mat-tab-group的代碼解決了這個問題。 它正在通過@ContentChildren讀取子項並將它們附加到_allTabs屬性。 因此，我的解決方案是在模板中提供一個<mat-tab>並確保它是分配給_allTabs的列表/查詢中的第一項。 這是我的解決方案的完整來源：

 import { Component, ContentChildren, QueryList, ViewChild, ViewContainerRef, ChangeDetectorRef, } from '@angular/core'; import { MatTab, MatTabGroup } from '@angular/material/tabs'; import { UiTabExtendedComponent } from '../ui-tab-extended/ui-tab-extended.component'; @Component({ selector: 'ui-tabs-extended', styleUrls: ['./ui-tabs-extended.component.scss'], template: ` <div class="footer-tabs-flex"> <div class="footer-tabs-flex-main"> <mat-tab-group #_tabBodyWrapper class="footer-tabs"> <mat-tab #_blankTab></mat-tab> <ng-content #outlet></ng-content> </mat-tab-group> </div> <div class="footer-tabs-flex-close"> <mat-icon mat-list-icon fontSet="fal" fontIcon="fa-times" (click)="_tabBodyWrapper.selectedIndex = 0" ></mat-icon> </div> </div> `, }) export class UiTabsExtendedComponent { @ViewChild(MatTabGroup) public _tabBodyWrapper: MatTabGroup; @ViewChild(MatTab) public _blankTab: MatTab; @ContentChildren(UiTabExtendedComponent) protected _allTabs: QueryList<UiTabExtendedComponent>; @ViewChild('outlet', { read: ViewContainerRef }) container; constructor(private cd: ChangeDetectorRef) {} public ngAfterViewInit() { const matTabsFromQueryList = this._allTabs.map((tab) => tab.matTab); matTabsFromQueryList.unshift(this._blankTab); const list = new QueryList<MatTab>(); list.reset([matTabsFromQueryList]); this._tabBodyWrapper._allTabs = list; this._tabBodyWrapper.ngAfterContentInit(); this.cd.detectChanges(); } }

 ::ng-deep.mat-tab-labels >.mat-tab-label:first-child { display: none; }.footer-tabs { width: 100%; }.footer-tabs-flex { display: flex; background-color: #dde1ec; }.footer-tabs-flex-main { flex: 1; }.footer-tabs-flex-close { flex-shrink: 0; margin-left: 16px; margin-top: 16px; mat-icon { cursor: pointer; } }