如何在angular中渲染不同的组件？

<ng-container *ngIf="condition">
  <app-component1></app-component1>
</ng-container>
<ng-container *ngIf="!condition">
  <app-component2></app-component2>
</ng-container>

<div [ngSwitch]="condition">
  <app-component1 *ngSwitchCase="'value1'"></app-component1>
  <app-component2 *ngSwitchCase="'value2'"></app-component2>
  <app-component3 *ngSwitchDefault></app-component3>
</div>

<ng-container #container></ng-container>

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';

@Component({
  selector: 'app-dynamic-component',
  template: `
    <ng-container #container></ng-container>
  `
})
export class DynamicComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  renderComponent(component: any) {
    this.container.clear();
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
    this.container.createComponent(componentFactory);
  }
}

const routes: Routes = [
  { path: 'component1', component: Component1 },
  { path: 'component2', component: Component2 },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<router-outlet></router-outlet>