Angular動的作成コンポーネントのサービスコード

テストにより、動的作成コンポーネントとルーティングに干渉があり、ルーティングを削除した後、動的作成コンポーネントは正常に動作します.
dynamic-create.service.tsこのサービスは、任意のコンテナ内に任意のコンポーネントを作成することができる.作成する前にコンテナが空になります.

import { Injectable, ViewContainerRef, ComponentFactory, ComponentRef, ComponentFactoryResolver, Type } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DynamicCreateService {

  constructor(private resolver: ComponentFactoryResolver) { }

  createComponent<componentType>(container: ViewContainerRef, component: Type<componentType>): ComponentRef<componentType> {
    container.clear();
    const factory: ComponentFactory<componentType> =
      this.resolver.resolveComponentFactory<componentType>(component);
    return container.createComponent(factory);
  }
}

使用法:app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit, AfterViewInit {
  @ViewChild('viewContainer', { read: ViewContainerRef }) container: ViewContainerRef;
  componentRef: ComponentRef<any>;

  constructor(
    private dcs: DynamicCreateService,
  ) {
  }

  ngAfterViewInit(): void {
    if (sessionStorage.getItem('userToken')) {
      this.createHomePage();
    } else {
      this.createLoginPage();
    }
  }

  createLoginPage() {
    this.componentRef = this.dcs.createComponent(this.container, LoginComponent);
    (this.componentRef.instance as LoginComponent).login.subscribe(() => this.createHomePage());
  }

  createHomePage() {
    this.componentRef = this.dcs.createComponent(this.container, HomeComponent);
  }
}

app.component.html

<ng-template #viewContainer>ng-template>