Angular 10個動態添加的元件斷片

Question

我的任務是徹底檢查我們的 web 應用程序集合的主頁。

目前，我們已經繼承了一些其他應用程序，它們的菜單系統非常龐大，並且在點擊和導航方面遠遠超出了我們想要的用戶體驗。

我自願盡我所能把我們的小馬戲團變成一個SPA。 我想我能做的就是對其進行加載管理，這樣應用程序之間就不再需要傳統的導航，只需將應用程序動態加載到用戶的工作區中即可。

在大多數情況下，這似乎很好。 它並不完美，但有效。

然后我注意到：我們有幾個應用程序，其父組件是包含選項卡的組件。 並且動態加載器不會加載這些選項卡。 事實上，它幾乎破壞了所有已加載組件中的材料標簽。

加載 Function：

injectDynamicComponent(componentName) {
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentName);
        const containerRef = this.viewContainerRef;
        containerRef.clear();
        containerRef.createComponent(componentFactory);
       } 

聲明和構造函數：

    @ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: ViewContainerRef;
    @ViewChild('navGroup') navGroup: ElementRef;

    constructor(
        private uiService: UserInfoService,
        private phService: PageHeaderService,
        private aduserService: ADUserService,
        private menuService: MenuService,
        private viewContainerRef: ViewContainerRef,
        private componentFactoryResolver: ComponentFactoryResolver,
        private router: Router,
        private configService: ConfigsLoaderService,
        private renderer: Renderer2) {)

HTML 用於注入組件：

        <div style="min-height:100%; max-width: 90% !important;">
          <div #dynamicInsert></div>
        </div>

注入組件供參考：

<div fxLayout="column" fxLayoutAlign="center" style="max-width: 90% !important;">
  <mat-tab-group mat-align-tabs="center">
    <mat-tab label="Call Tracker" *ngIf="isAgent || isLead || isSuper"><app-calltracker></app-calltracker></mat-tab>
    <mat-tab label="Call Report" *ngIf="isLead || isSuper"><app-callreport></app-callreport></mat-tab>
    <mat-tab label="Call Types" *ngIf="isSuper"><app-calltypes></app-calltypes></mat-tab>
  </mat-tab-group>
</div>

在上面你可以看到沒有加載任何標簽。 您可以在下面看到標簽加載。 我目前也在更改輸入類型，這就是它們看起來不同的原因。

Answer 1

嘗試調用this.componentRef.changeDetectorRef.detectChanges(); 組件創建后。