如何在 Angular 16 中动态加载微应用

Question

我正在尝试通过单击角度 16 中菜单栏中的选项卡在屏幕右侧加载微应用。

我遇到了动态组件加载的概念，正在尝试尝试它，但遇到了同样的问题。下面是代码。您能否让我知道在这个特定场景中我哪里出了问题。

---

菜单.组件.ts

import { AfterViewInit, Component, OnInit, ViewChildren } from '@angular/core';
import { LandingDirective } from 'src/app/directive/landing.directive';
import { DataRetrievalService } from 'src/app/service/data-retrieval.service';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit, AfterViewInit {
  
  @ViewChild(LandingDirective, {static: true}) appLanding!: LandingDirective;

  menuoptions: any = []

  active = '';
  constructor(private dataRetrievalService: DataRetrievalService) { }

  ngAfterViewInit(): void {
    this.loadMicroapp();
  }

  ngOnInit(): void {
    this.menuoptions = this.dataRetrievalService.getMenuOptions();
    console.log("menuOptions: ", this.menuoptions);
    this.active = this.menuoptions[0].option;
    console.log("activeTab: ", this.active);
  }

  loadMicroapp() {
    console.log("microappComponent: ",this.appLanding);
    const { viewContainerRef }: LandingDirective = this.appLanding;
    console.log(viewContainerRef);
  }
}

---

menu.component.html

<div class="d-flex">
    <div ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills flex-column" orientation="vertical">
        <ng-container *ngFor="let section of menuoptions" [ngbNavItem]="section.option">
            <button ngbNavLink (click)="loadMicroapp()">
                {{ section.option }}
            </button>
            <ng-template ngbNavContent>
                <p>Tab {{ section.option }} content</p>
                <ng-template appLanding></ng-template>
            </ng-template>
        </ng-container>
    </div>
    <div [ngbNavOutlet]="nav" class="mt-2"></div>
</div>

---

登陆.directive.ts

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appLanding]'
})
export class LandingDirective {

  constructor(public viewContainerRef: ViewContainerRef) {}

}

---

使用的参考链接：

https://angular.io/guide/dynamic-component-loader

https://developer.okta.com/blog/2021/12/08/angular-dynamic-components