如何在Angular中点击按钮随机生成并显示指定子组件？

这个需求完全可行，直接按下面的步骤修改代码就能实现：

修改TS代码 #

添加一个变量存储当前选中的组件，同时更新getRandom方法把随机选中的组件赋值给这个变量：

export class ParentComponent {
  // 存储当前要显示的组件名称
  currentComponent: string | undefined;

  components = [
    'brother',
    'sister',
    'baby'
  ];

  getRandom(){
    // 随机选中一个组件并赋值给currentComponent
    this.currentComponent = this.components[Math.floor(Math.random() * this.components.length)];
  }
}

注：原代码里的@Input() component如果没有实际用途可以删掉，保留也不影响功能。

修改HTML代码 #

去掉多余的*ngFor遍历（因为只需要显示一个随机组件），给每个子组件的容器加上*ngIf判断，同时添加触发随机的按钮：

<!-- 添加触发随机的按钮 -->
<button (click)="getRandom()">生成随机组件</button>

<div class="components">
    <div class="brother" *ngIf="currentComponent === 'brother'">
        <app-brother></app-brother>
    </div>

    <div class="sister" *ngIf="currentComponent === 'sister'">
        <app-sister></app-sister>
    </div>

    <div class="baby" *ngIf="currentComponent === 'baby'">
        <app-baby></app-baby>
    </div>
</div>

逻辑说明 #

1. 点击按钮调用getRandom方法，从数组里随机选一个组件名称赋值给currentComponent
2. 每个子组件容器通过*ngIf判断currentComponent是否和自身的组件名称匹配，匹配就显示，不匹配就隐藏

内容的提问来源于stack exchange，提问作者spikeycakes