[英]Dynamically add mat-tab to a wrapped mat-tab-group
My end goal is to create a reusable mat-tab-group
component that adds some functionality to be able to close all tabs.我的最终目标是创建一个可重用的mat-tab-group
组件,该组件添加了一些功能以能够关闭所有选项卡。 I have found a technique for doing this here:我在这里找到了执行此操作的技术:
https://stackoverflow.com/a/53818913/811277 https://stackoverflow.com/a/53818913/811277
My next set was to wrap the functionality so it can be turned into a re-usable component.我的下一组是包装功能,以便它可以变成一个可重用的组件。 I have tried using the technique found here:我尝试使用此处找到的技术:
Angular Material Tabs not working with wrapper component Angular 材料标签不适用于包装组件
In the end I'm having trouble creating an empty MatTab
component to insert at the beginning my list of MatTabs.最后,我无法创建一个空的MatTab
组件来插入我的 MatTabs 列表的开头。
I've created a StackBlitz for this:我为此创建了一个 StackBlitz:
https://stackblitz.com/edit/angular9-material-baseline-nns7wc 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;
}
I was hoping to just create a MatTab component in the code above, but it isn't as simple as just saying new MatTab();
我希望在上面的代码中只创建一个 MatTab 组件,但这并不像说new MatTab();
这样简单。
I solved this by taking a deeper look at the code that was wrapping mat-tab-group
.我通过更深入地查看包装mat-tab-group
的代码解决了这个问题。 It was reading the children via @ContentChildren
and attaching them to the _allTabs
property.它正在通过@ContentChildren
读取子项并将它们附加到_allTabs
属性。 Therefore, my solution was to provide a <mat-tab>
in the template and just make sure it was the first item in the list/query that gets assigned to _allTabs
.因此,我的解决方案是在模板中提供一个<mat-tab>
并确保它是分配给_allTabs
的列表/查询中的第一项。 Here is the full source for my solution:这是我的解决方案的完整来源:
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; } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.