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(); 组件创建后。