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

import { Component } from '@angular/core';

@Component({
  selector: 'app-component-a',
  template: `<p>Component A</p>`
})
export class ComponentA {}

import { Component } from '@angular/core';

@Component({
  selector: 'app-component-b',
  template: `<p>Component B</p>`
})
export class ComponentB {}

import { Component } from '@angular/core';
import { ComponentA } from './component-a.component';
import { ComponentB } from './component-b.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-component-a *ngIf="showComponentA"></app-component-a>
    <app-component-b *ngIf="showComponentB"></app-component-b>
  `,
})
export class ParentComponent {
  showComponentA = true;
  showComponentB = false;

  toggleComponents() {
    this.showComponentA = !this.showComponentA;
    this.showComponentB = !this.showComponentWithB;
  }
}

import { Component } from '@angular/core';
import { ComponentA } from './component-a.component';
import { ComponentB } from './component-b.component';

@Component({
  selector: 'app-parent',
  template: `
    <ng-container [ngSwitch]="currentComponent">
      <app-component-a *ngSwitchCase="'componentA'"></app-component-a>
      <app-component-b *ngSwitchCase="'componentB'"></app-component-b>
    </ng-container>
  `,
})
export class ParentComponent {
  currentComponent = 'componentA';

  changeComponent(component: string) {
    this.currentComponent = component;
  }
}