[英]Dynamically loaded content in Angular Material Tabs
我正在嘗試從 Angular Material: Tabs 構建一個動態選項卡系統,但我遇到了在后續選項卡上加載內容的問題,該概念僅適用於加載的第一個選項卡。
下面是選項卡組。 這些選項卡是由從某個服務發送的一組“選項卡”構成的,在組上,我有一個更改事件,該事件應該在更改時動態加載 .
<mat-tab-group *ngIf="tabs.length >= 1" #shiftplanningtabgroup (selectedTabChange)="selectedTabChange($event);">
<mat-tab *ngFor="let tab of tabs; let idx = index;" [disabled]="tab.disabled">
<ng-template mat-tab-label>
<div class="ava-mat-tab-label font-size-12" fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="center end">
<mat-checkbox [checked]="tab.active" [disabled]="tab.disabled" (change)="checkboxStateChange($event, idx);"></mat-checkbox>
<label class="cursor-pointer">{{ tab.label }}</label>
</div>
</ng-template>
<div class="tab-content">
<ng-template #tabHost></ng-template>
</div>
</mat-tab>
</mat-tab-group>
'selectedTabChange' 事件處理程序:
public selectedTabChange(event: MatTabChangeEvent): void {
this.loadTabContent(event.index);
}
'loadTabContent' 方法:
private loadTabContent(index: number): void {
this.container.clear();
const factory = this.componentFactoryResolver.resolveComponentFactory(AvaShiftPlanningTabContentComponent);
const componentRef = this.container.createComponent<AvaShiftPlanningTabContentComponent>(factory);
(componentRef.instance as AvaShiftPlanningTabContentComponent).loading = true;
(componentRef.instance as AvaShiftPlanningTabContentComponent).tab = this.tabs[index];
(componentRef.instance as AvaShiftPlanningTabContentComponent).tabLoadingCompleted.subscribe((value: any) => {
this.tabLoadingComplete(value);
});
}
以及對#tabHost 的引用:
@ViewChild('tabHost', { read: ViewContainerRef }) container: ViewContainerRef;
這有效,僅在第一個選項卡上。 如果我添加多個選項卡,所有后續選項卡都不會顯示任何內容,但是,該組件肯定會在選項卡更改時被點擊,只是不會呈現動態加載的組件的內容。
這是 Material: Tabs 的限制還是我嘗試加載組件的方式有問題?
嘿,我認為這個答案來晚了:
但我經過這里,所以我想如果我提供幫助會很好。 這就是我的做法。
<mat-tab-group (selectedIndexChange)="selected.setValue($event)"
[selectedIndex]="selected.value" animationDuration="0"
class="h-100 w-100">
<mat-tab *ngFor="let tab of tabs; let index = index">
<ng-template class="w-100" mat-tab-label>
{{ tab.label }}
<mat-icon (click)="removeTab(index)" class="float-end">cancel</mat-icon>
</ng-template>
<ng-template #frame style="max-width: 100%;"></ng-template> // <-- notice here
</mat-tab>
</mat-tab-group>
框架必須是 ViewChildren 而不是 ViewChild 因為它有很多項目,所以你不能覆蓋相同的 viewContainerRef 這是你可以使用它的方式。
@ViewChildren('frame', { read: ViewContainerRef }) frame: QueryList<ViewContainerRef>;
添加將是這樣的:
this.tabs.push(action);
if (selectAfterAdding) {
this.selected.setValue(this.tabs.length - 1);
}
對於內容動態,您可以使用組件工廠解析器,您可以在此處找到更多信息。
謝謝,我希望這可以幫助任何需要它的人。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.