Angular 技术教程：动态组件加载

在Angular应用中，动态加载组件可以极大地提高应用的灵活性和可扩展性。本文将通过一个详细的案例，讲解如何在Angular中实现动态组件加载。

一、准备工作

首先，确保你已经创建了一个Angular项目。如果还没有，可以使用Angular CLI创建一个新的项目。

二、创建动态组件

接下来，我们需要创建一些将要动态加载的组件。例如，我们创建两个简单的组件：`ComponentA` 和 `ComponentB`。

1. 使用Angular CLI创建组件：

ng generate component ComponentA
ng generate component ComponentB

2. 在这些组件的模板中添加一些简单的HTML内容，以便我们能够区分它们。

三、创建动态组件容器

接下来，我们需要创建一个容器组件，用于动态加载这些组件。

1. 创建一个新的组件，命名为 `DynamicComponentContainer`。

ng generate component DynamicComponentContainer

2. 在 `DynamicComponentContainer` 组件中，使用Angular的 `ComponentFactoryResolver` 和 `ViewContainerRef` 来动态加载组件。

首先，在 `DynamicComponentContainer` 组件的模板中添加一个 “，作为动态组件的容器：

<ng-template #dynamicComponentContainer></ng-template>

然后，在 `DynamicComponentContainer` 组件的类中，添加以下代码：


import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, Input } from '@angular/core';
import { ComponentA } from './component-a/component-a.component';
import { ComponentB } from './component-b/component-b.component';

@Component({
  selector: 'app-dynamic-component-container',
  templateUrl: './dynamic-component-container.component.html',
  styleUrls: ['./dynamic-component-container.component.css']
})
export class DynamicComponentContainerComponent {
  @ViewChild('dynamicComponentContainer', { read: ViewContainerRef, static: true }) container!: ViewContainerRef;
  private componentMap = {
    'ComponentA': ComponentA,
    'ComponentB': ComponentB
  };

  @Input() componentName: string = '';

  ngOnChanges() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.componentMap[this.componentName]);
    this.container.clear();
    this.container.createComponent(componentFactory);
  }

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
}

注意：在Angular 8及以上版本中，`@ViewChild` 的 `static` 属性需要设置为 `true` 或 `false`，具体取决于你是否需要在 `ngOnChanges` 生命周期钩子中访问视图查询结果。在这个例子中，我们将其设置为 `true`。

四、使用动态组件容器

现在，我们可以在父组件中使用 `DynamicComponentContainer` 组件，并通过绑定 `componentName` 输入属性来动态加载不同的组件。

例如，在 `AppComponent` 中：


<app-dynamic-component-container [componentName]="'ComponentA'"></app-dynamic-component-container>
<button (click)="changeComponent('ComponentB')">切换到ComponentB</button>

export class AppComponent {
  componentName: string = 'ComponentA';

  changeComponent(componentName: string) {
    this.componentName = componentName;
  }
}