Question

我的最终目标是创建一个可重用的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();

那样简单。

Answer 1

我通过更深入地研究包装@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;
  }
}

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

1 个答案: