Angular Material 个标签中的动态加载内容
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 的限制:选项卡还是我尝试加载组件的方式有问题?
嘿,我觉得这个回答晚了:
但是我路过这里所以我想如果我能提供帮助就好了。
我就是这样做的。
<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);
}
对于内容动态,您可以使用 Component Factory Resolver,您可以找到更多 here。
谢谢,我希望这对任何需要它的人有所帮助。
我正在尝试从 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 的限制:选项卡还是我尝试加载组件的方式有问题?
嘿,我觉得这个回答晚了:
但是我路过这里所以我想如果我能提供帮助就好了。 我就是这样做的。
<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);
}
对于内容动态,您可以使用 Component Factory Resolver,您可以找到更多 here。
谢谢,我希望这对任何需要它的人有所帮助。