Динамически загружать и условно показывать компонент в Angular

В моем приложении Angular у меня есть розетка маршрутизатора, а сбоку у меня есть несколько контейнеров предварительного просмотра, показывающие компоненты предварительного просмотра, куда направляется соответствующий основной компонент и который отображается в розетке маршрутизатора при нажатии на эти поля, в то время как затем отображается предыдущий основной компонент. загружен в теперь уже бесплатный контейнер предварительного просмотра.

По сути, он работает так, как задумано, но у меня есть один особый случай, когда я нажимаю кнопку приглашения члена семьи, тогда в представлении должен появиться #leftThirdContainer (для этого используется *ngIf) с соответствующим компонентом предварительного просмотра, показанным в leftThirdContainer. Я делаю это с помощью Observable, который проверяет текущий маршрут, и всякий раз, когда он соответствует «/private/invite», это должно быть правдой. Но кажется, что даже когда я жду запуска события маршрутизатора, leftThirdContainer не определен, и поэтому компонент не отображается в представлении. Только при обновлении компонент отображается правильно в leftThirdContainer.

вот мой HTML:

<button mat-flat-button color = "primary" (click) = "inviteFamilyMember()" class = "invite-button" *ngIf = "!(showThirdPreviewContainer$ | async)">invite</button>
<div class = "container">
  <div class = "column column-1">
    <div class = "row row-1" (click) = "loadComponents('leftFirst')">
      <ng-container #leftFirstContainer></ng-container>
    </div>
    <div class = "row row-2" (click) = "loadComponents('leftSecond')">
      <ng-container #leftSecondContainer></ng-container>
    </div>
    <div class = "row row-3" (click) = "loadComponents('leftThird')" *ngIf = "showThirdPreviewContainer$ | async">
      <ng-container #leftThirdContainer></ng-container>
    </div>
  </div>
  <div class = "column column-2">
    <router-outlet></router-outlet>
  </div>
</div>

и вот класс машинописного текста:

export class PrivateComponent implements AfterViewInit {
  @ViewChild('leftFirstContainer', { read: ViewContainerRef }) leftFirstContainer: ViewContainerRef;
  @ViewChild('leftSecondContainer', { read: ViewContainerRef }) leftSecondContainer: ViewContainerRef;
  @ViewChild('leftThirdContainer', { read: ViewContainerRef }) leftThirdContainer: ViewContainerRef;

  showThirdPreviewContainer$: Observable<boolean>;

  private destroyRef = inject(DestroyRef);

  constructor(
    private privateComponentService: PrivateComponentSerivce,
    private router: Router,
    ) {
    this.showThirdPreviewContainer$ = this.router.events.pipe(
      filter(event => event instanceof NavigationStart || event instanceof NavigationEnd),
      map((event: NavigationStart | NavigationEnd) => event.url === '/private/invite'),
      startWith(this.router.url === '/private/invite'),
      takeUntilDestroyed(this.destroyRef)
    );
  }

  ngAfterViewInit() {
    if (this.privateComponentService.getRefreshTriggered()) {
      this.privateComponentService.setRefreshTriggered(false);
      this.loadPreviewComponents(false);
    } else {
      this.initComponentContainer()
    }
  }

  loadComponents(containerType: ContainerTypes): void {
    const currentComponentContainer = this.privateComponentService.getCurrentComponentContainer();
    const newComponentContainer = this.privateComponentService.mapContainerComponents(containerType, currentComponentContainer);

    if (newComponentContainer?.main) {
      this.router.navigate([newComponentContainer.main]).then(() => this.setPreviewComponents(newComponentContainer));
    }
  }

  inviteFamilyMember(): void {
    this.router.navigate([MainContainerRoutes.Invite]).then(() => {
      this.router.events.pipe(
        filter(event => event instanceof NavigationEnd),
        takeUntilDestroyed(this.destroyRef)
      ).subscribe((event) => {
        this.loadPreviewComponents(true);
      });
    });
  }

  private initComponentContainer() {
    const currentComponentContainer = this.privateComponentService.getCurrentComponentContainer();
    this.router.navigate([currentComponentContainer.main]).then(() => this.setPreviewComponents(currentComponentContainer));
  }

  private loadPreviewComponents(privateInviteClicked: boolean) {
    const currentComponentContainer = this.privateComponentService.getCurrentComponentContainer();
    if (privateInviteClicked) {
      const newComponentContainer = this.privateComponentService.mapContainerForInviteComponent(currentComponentContainer);
      this.setPreviewComponents(newComponentContainer);
    } else {
      this.setPreviewComponents(currentComponentContainer);
    }
  }

  private setPreviewComponents(componentContainer: ContainerComponents) {
    if (this.leftFirstContainer) this.leftFirstContainer.clear();
    if (this.leftSecondContainer) this.leftSecondContainer.clear();
    if (this.leftThirdContainer) this.leftThirdContainer.clear();

    if (componentContainer?.leftFirst && componentContainer?.leftSecond && this.leftFirstContainer && this.leftSecondContainer) {
      const leftFirstComponentRef = this.leftFirstContainer.createComponent(COMPONENTS[componentContainer.leftFirst]);
      const leftSecondComponentRef = this.leftSecondContainer.createComponent(COMPONENTS[componentContainer.leftSecond]);
      if (this.leftThirdContainer && componentContainer?.leftThird) {
        const leftThirdComponentRef = this.leftThirdContainer.createComponent(COMPONENTS[componentContainer.leftThird]);
      }
      this.privateComponentService.setCurrentComponentContainer(componentContainer);
    }
  }
}

Я знаю, что могу дождаться загрузки компонента с помощью setTimeout (это сработает), но это кажется неправильным. Поэтому я хочу знать, что-то не так с моим кодом и пониманием Angular и почему он не работает должным образом. Или есть другой способ Angular добиться того, чего я хочу (динамически загружать и условно показывать компоненты)?