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

在 Angular 中，您可以使用*ngIf 和 ngSwitchCase 指令来根据条件动态渲染不同的组件

使用 *ngIf 指令：

首先，创建两个组件，例如 ComponentA 和 ComponentB。

ComponentA:

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

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

ComponentB:

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

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

在父组件中，根据条件使用 *ngIf 指令：

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;
  }
}

使用 ngSwitch 指令：

在父组件中，使用 ngSwitch 和 ngSwitchCase 指令：

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;
  }
}

这两种方法都可以实现在 Angular 中根据条件渲染不同的组件。使用 *ngIf 指令时，组件会根据条件分别渲染或销毁。使用 ngSwitch 时，组件则在一开始就被创建好，只是根据条件显示或隐藏。根据实际情况选择合适的方法。