Динамически загружаемый контент на вкладках Angular Material

Я пытаюсь создать динамическую систему вкладок из 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;

Работает только на первой вкладке. Если я добавлю более одной вкладки, все последующие вкладки не будут отображать содержимое, однако компонент определенно попадает при смене вкладки, просто содержимое для динамически загружаемого компонента не отображается.

Это ограничение материала: вкладки или что-то не так с тем, как я пытаюсь загрузить компонент?


typescript angular angular-material angular-dynamic-components
person JadedEric    schedule 14.10.2020    source источник
comment
Я бы предложил попробовать удалить ng-template и выбрать что-то вроде div. Идк, если это поможет, но я бы попробовал. Обратите внимание на это сообщение: stackoverflow.com/questions/51759013/   -  person iamaword    schedule 14.10.2020

Ответы (1)


arrow_upward
0
arrow_downward

Эй, я думаю, что ответ запоздал:

но я прошел здесь, поэтому подумал, что если я окажу помощь, будет хорошо. вот как я это делаю.

         <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, который вы можете найти здесь .

Спасибо, и я надеюсь, что эта помощь кому-то нужна.

person Alaa M. Jaddou    schedule 12.04.2021