在Angular Material选项卡中动态加载的内容

问题描述

我正在尝试从Angular Material：Tabs构建动态的标签系统，并且在后续标签上加载内容时遇到了问题，该概念仅适用于正在加载的第一个标签。

下面是选项卡组。这些选项卡是由某些服务发送的“选项卡”数组构成的，在该组上，我有一个change事件，当更改该事件时，应在..p中动态加载活动选项卡的组件。

<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);
    }

对于内容动态，您可以使用组件工厂解析器，您可以找到更多here。

谢谢，我希望这能帮助任何需要它的人。