将 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; } }