将 mat-tab 动态添加到包装的 mat-tab-group答案

【问题标题】：Dynamically add mat-tab to a wrapped mat-tab-group将 mat-tab 动态添加到包装的 mat-tab-group
【发布时间】：2020-11-24 01:11:24
【问题描述】：

我的最终目标是创建一个可重用的mat-tab-group 组件，该组件添加了一些能够关闭所有选项卡的功能。我在这里找到了一种技术：

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

我的下一个设置是包装该功能，以便将其转换为可重用的组件。我已经尝试使用这里找到的技术：

Angular Material Tabs not working with wrapper component

最后，我无法创建一个空的 MatTab 组件以插入到我的 MatTab 列表的开头。

我为此创建了一个 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();那么简单

【问题讨论】：

标签： angular angular-material

【解决方案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;
  }
}

【讨论】：