Динамическое добавление mat-tab в обернутую mat-tab-group

Question

Моя конечная цель - создать повторно используемый компонент mat-tab-group, который добавляет некоторые функции, позволяющие закрывать все вкладки. Я нашел способ сделать это здесь:

{ ссылка }

Мой следующий набор заключался в том, чтобы обернуть функциональность, чтобы ее можно было превратить в повторно используемый компонент . Я пробовал использовать метод, найденный здесь:

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