我正在尝试创建一个围绕MatTabs的包装器,它暴露了MatTabs的所有属性并且遇到了这个问题：
Angular Material Tabs not working with wrapper component
我添加了其他标签属性和事件.
这些事件似乎正在触发.
Angular Material Tabs not working with wrapper component
我添加了其他标签属性和事件.
这些事件似乎正在触发.
添加新选项卡时出现问题.阵列正在更新,但UI保持不变.
HTML
<div>
<span class="example-input-label"> Selected tab index: </span>
<mat-form-field>
<input matInput type="number" [formControl]="selected">
</mat-form-field>
</div>
<div>
<button mat-raised-button
class="example-add-tab-button"
(click)="addTab(selectAfterAdding.checked)">
ADD NEW TAB
<br/>
</button>
<mat-checkBox #selectAfterAdding> Select tab after adding </mat-checkBox>
</div>
<custom-tabs [selectedIndex]="selected.value"
(sqSelectedIndexChange)="selected.setValue($event)">
<custom-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
Contents for {{tab}} tab
<button mat-raised-button
class="example-delete-tab-button"
[disabled]="tabs.length === 1"
(click)="removeTab(index)">
Delete Tab
<br/>
</button>
</custom-tab>
</custom-tabs>
TS
tabs = ['First','Second','Third'];
selected = new FormControl(0);
addTab(selectAfterAdding: boolean) {
this.tabs.push('New');
console.log(this.tabs);
if (selectAfterAdding) {
this.selected.setValue(this.tabs.length - 1);
}
}
removeTab(index: number) {
this.tabs.splice(index,1);
}
理想情况下,我希望揭示MatTabs提供的所有功能,然后是一些.
解决方法
因此,选项卡未加载的原因是由于custom-tabs组件的ngViewAfterInit()函数中的代码.它被初始化了,但就是这样.因此,this.tabGroup永远不会使用当前选项卡进行更新,因此未在UI中反映出来.所以我添加了一个订阅来监视标签何时更改,并使用相同的逻辑(我不确定是100％正确,但它完成了工作).
public ngAfterViewInit() {
const matTabsFromQueryList = this.tabs.map((tab) => tab.matTab);
const list = new QueryList<MatTab>();
list.reset([matTabsFromQueryList]);
this.tabGroup._tabs = list;
this.tabGroup.ngAfterContentInit();
// watches for when the tabs change
this.tabs.changes.subscribe(value => {
const matTabsFromQueryList = value.map((tab) => tab.matTab);
const list = new QueryList<MatTab>();
list.reset([matTabsFromQueryList]);
this.tabGroup._tabs = list;
this.tabGroup.ngAfterContentInit();
});
}
这(再次)不是最优雅的解决方案,因为您需要在加载之前与选项卡进行交互,但它会保留上下文(如输入框所示).没有选择不同的选项卡,选项卡不会更新,所以我不得不做一个hacky解决方案,我将this.selected.value切换为-1然后切换回正确的选项卡,所以它有点难看,但至少它的工作原理.
