Angular中如何在HTML中随机加载指定组件？

你可以通过动态组件加载的方式实现需求，核心思路是在app-random-component容器组件中随机选择目标组件，再动态挂载到视图中。具体实现步骤如下：

1. 配置模块 #

确保所有需要动态加载的组件（Component1/2/3）和容器组件（RandomComponent）都在模块中声明：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { Component1 } from './component1.component';
import { Component2 } from './component2.component';
import { Component3 } from './component3.component';
import { RandomComponent } from './random.component';

@NgModule({
  declarations: [
    AppComponent,
    Component1,
    Component2,
    Component3,
    RandomComponent
  ],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
  // Angular 9+ Ivy 编译模式下可省略 entryComponents，老版本需添加
  entryComponents: [Component1, Component2, Component3]
})
export class AppModule { }

2. 实现 RandomComponent #

创建容器组件，通过ViewContainerRef动态挂载随机选中的组件：

import { Component, ViewChild, ViewContainerRef, OnInit } from '@angular/core';
import { Component1 } from './component1.component';
import { Component2 } from './component2.component';
import { Component3 } from './component3.component';

@Component({
  selector: 'app-random-component',
  template: `<ng-template #container></ng-template>`
})
export class RandomComponent implements OnInit {
  // 获取视图容器引用，用于挂载动态组件
  @ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;

  // 存储所有可选组件的数组
  private componentPool = [Component1, Component2, Component3];

  ngOnInit(): void {
    this.renderRandomComponent();
  }

  private renderRandomComponent(): void {
    // 清空容器，避免重复渲染
    this.container.clear();
    // 生成随机索引
    const randomIdx = Math.floor(Math.random() * this.componentPool.length);
    // 选中目标组件并创建实例挂载
    this.container.createComponent(this.componentPool[randomIdx]);
  }

  // 可选：添加公共方法支持手动触发重新随机
  public reRandom(): void {
    this.renderRandomComponent();
  }
}

3. 在根组件中使用 #

直接在根组件的HTML中使用容器组件标签：

<app-random-component></app-random-component>

<!-- 可选：添加按钮手动触发重新随机 -->
<button (click)="$event.target.previousSibling.reRandom()">重新随机</button>

补充说明 #

• Angular 13+ 版本中，ViewContainerRef.createComponent直接支持传入组件类型，无需额外使用ComponentFactoryResolver，代码更简洁
• 确保Component1/2/3各自拥有完整的模板（.component.html）和样式（.component.css）文件，否则无法正常渲染
• 如果需要保留之前的组件实例而非清空，可以去掉this.container.clear()，但会导致多个组件叠加渲染

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