qrcode

马上订阅,开启修仙之旅

Angular 动态创建组件

本文我们将介绍在 Angular 中如何动态创建组件。

定义 AlertComponent 组件

首先,我们先来定义一个 AlertComponent 组件:

1
2
3
4
5
6
7
8
9
10
11
12
import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
selector: "alert",
template: `
<h1 (click)="output.next('output')">Alert {{ type }}</h1>
`,
})
export class AlertComponent {
@Input() type: string = "success";
@Output() output = new EventEmitter();
}

上面代码中,我们定义了一个简单的 AlertComponent 组件,该组件有一个输入属性 type ,用于让用户自定义提示的类型,此外还包含了一个输出属性 output,用于向外部组件输出信息。我们的自定义组件最终是一个实际的 DOM 元素,因此如果我们需要在页面中插入该元素,我们就需要考虑在哪里放置该元素。

创建组件容器

在 Angular 中放置组件的地方称为容器。接下来,我们将在根组件中创建一个模板元素,另外我们使用模板变量的语法,声明一个模板变量。接下来模板元素 <ng-template> 将会作为我们的组件容器,具体示例如下:

1
2
3
4
5
6
7
8
9
import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<ng-template #alertContainer></ng-template>
`
})
export class AppComponent { }

在 AppComponent 组件中,我们可以通过 ViewChild 装饰器来获取视图中的模板元素,如果没有指定第二个查询参数,则默认返回的 ElementRef 实例,但这个示例中,我们需要获取 ViewContainerRef 实例。

ViewContainerRef 用于表示一个视图容器,可添加一个或多个视图。通过 ViewContainerRef 实例,我们可以基于 TemplateRef 实例创建内嵌视图,并能指定内嵌视图的插入位置,也可以方便对视图容器中已有的视图进行管理。简而言之,ViewContainerRef 的主要作用是创建和管理内嵌视图或组件视图。

根据以上需求,更新后的代码如下:

1
2
3
4
5
6
7
8
9
10
11
import { Component, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<ng-template #alertContainer></ng-template>
`
})
export class AppComponent {
@ViewChild("alertContainer", { read: ViewContainerRef }) container: ViewContainerRef;
}

动态创建组件

接下来,在 AppComponent 组件中,我们来添加两个按钮,用于创建 AlertComponent 组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
import { Component, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<ng-template #alertContainer></ng-template>
<button (click)="createComponent('success')">Create success alert</button>
<button (click)="createComponent('danger')">Create danger alert</button>
`
})
export class AppComponent {
@ViewChild("alertContainer", { read: ViewContainerRef }) container: ViewContainerRef;
}

在我们定义 createComponent() 方法前,我们需要注入 ComponentFactoryResolver 服务对象。该 ComponentFactoryResolver 服务对象中,提供了一个很重要的方法 —— resolveComponentFactory() ,该方法接收一个组件类作为参数,并返回 ComponentFactory 实例 。

这里我们在 AppComponent 组件构造函数中,注入 ComponentFactoryResolver 服务:

1
constructor(private resolver: ComponentFactoryResolver) {}

接下来我们再来看一下 ComponentFactory 抽象类:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export abstract class ComponentFactory<C> {
abstract get selector(): string;
abstract get componentType(): Type<any>;

// selector for all <ng-content> elements in the component.
abstract get ngContentSelectors(): string[];
// the inputs of the component.
abstract get inputs(): {propName: string, templateName: string}[];
// the outputs of the component.
abstract get outputs(): {propName: string, templateName: string}[];
// Creates a new component.
abstract create(
injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any,
ngModule?: NgModuleRef<any>): ComponentRef<C>;
}

通过观察 ComponentFactory 抽象类,我们知道可以通过调用 ComponentFactory 实例的 create() 方法,来创建组件。介绍完上面的知识,我们来实现 AppComponent 组件的 createComponent() 方法:

1
2
3
4
5
6
createComponent(type) {
this.container.clear();
const factory: ComponentFactory<AlertComponent> =
this.resolver.resolveComponentFactory(AlertComponent);
this.componentRef = this.container.createComponent(factory);
}

接下来我们来分段解释一下上面的代码。

1
this.container.clear();

每次我们需要创建组件时,我们需要删除之前的视图,否则组件容器中会出现多个视图(如果允许多个组件的话,就不需要执行清除操作)。

1
2
const factory: ComponentFactory<AlertComponent> =
this.resolver.resolveComponentFactory(AlertComponent);

正如我们之前所说的,resolveComponentFactory() 方法接受一个组件并返回 ComponentFactory 实例。

1
this.componentRef = this.container.createComponent(factory);

在上面代码中,我们调用容器对象的 createComponent() 方法,该方法内部将调用 ComponentFactory 实例的 create() 方法创建对应的组件,并将组件添加到我们的容器中。

现在我们已经获得新组件的引用,即可以我们可以手动设置组件的输入类型:

1
this.componentRef.instance.type = type;

同样我们也可以订阅组件的输出属性:

1
this.componentRef.instance.output.subscribe(event => console.log(event));

当我们不需要已创建的组件时,我们也可以通过调用 destroy() 方法销毁组件:

1
2
3
ngOnDestroy() {
this.componentRef.destroy();
}

最后我们需要将动态组件添加到 NgModule 的 entryComponents 属性中:

1
2
3
4
5
6
7
@NgModule({
...,
declarations: [AppComponent, AlertComponent],
bootstrap: [AppComponent],
entryComponents: [AlertComponent],
})
export class AppModule { }

完整示例

  1. alert.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
selector: "alert",
template: `
<h1 (click)="output.next('output')">Alert {{ type }}</h1>
`,
})
export class AlertComponent {
@Input() type: string = "success";
@Output() output = new EventEmitter();
}
  1. app.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, ComponentFactory, ComponentRef, OnDestroy } from '@angular/core';
import { AlertComponent } from './alert.component';

@Component({
selector: 'my-app',
template: `
<ng-template #alertContainer></ng-template>
<button (click)="createComponent('success')">Create success alert</button>
<button (click)="createComponent('danger')">Create danger alert</button>
`
})
export class AppComponent implements OnDestroy {
componentRef: ComponentRef<AlertComponent>;
@ViewChild("alertContainer", { read: ViewContainerRef }) container: ViewContainerRef;

constructor(private resolver: ComponentFactoryResolver) { }

createComponent(type) {
this.container.clear();
const factory: ComponentFactory<AlertComponent> =
this.resolver.resolveComponentFactory(AlertComponent);
this.componentRef = this.container.createComponent(factory);
this.componentRef.instance.type = type;
this.componentRef.instance.output.subscribe((msg: string) => console.log(msg));
}

ngOnDestroy() {
this.componentRef.destroy()
}
}
  1. app.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AlertComponent } from './alert.component';

@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, AlertComponent],
entryComponents: [AlertComponent],
bootstrap: [AppComponent]
})
export class AppModule { }

下面我们来总结一下动态加载组件的流程:

  • 获取装载动态组件的容器。
  • 在组件类的构造函数中,注入 ComponentFactoryResolver 对象。
  • 调用 ComponentFactoryResolver 对象的 resolveComponentFactory() 方法创建 ComponentFactory 对象。
  • 调用组件容器对象的 createComponent() 方法创建组件并自动添加动态组件到组件容器中。
  • 基于返回的 ComponentRef 组件实例,配置组件相关属性(可选)。
  • 在模块 Metadata 对象的 entryComponents 属性中添加动态组件:
    • declarations —— 用于指定属于该模块的指令和管道列表。
    • entryComponents —— 用于指定在模块定义时,需要编译的组件列表。对于列表中声明的每个组件,Angular 将会创建对应的一个 ComponentFactory 对象,并将其存储在 ComponentFactoryResolver 对象中。

通过 ComponentFactoryResolver 对象,我们实现了动态创建组件的功能。但创建的过程还是有点繁琐,为了提高开发者体验和开发效率,Angular 引入了 ngComponentOutlet 指令。 好的,我们马上来感受一下 ngComponentOutlet 指令带来的便利。

感兴趣的同学也可以在线查看 Stackblitz 完整示例。

ngComponentOutlet

  1. 更新根组件 AppComponent 模板,应用 ngComponentOutlet 指令:
1
2
3
4
5
6
7
@Component({
selector: 'my-app',
template: `
...
<ng-container *ngComponentOutlet="alertComponent"></ng-container>
`
})
  1. 更新 AppComponent 组件类,新增 alertComponent 属性:
1
2
3
4
5
6
import { AlertComponent } from './alert.component';

export class AppComponent implements OnDestroy {
alertComponent = AlertComponent;
//...
}

其实 ngComponentOutlet 指令除了包含 ngComponentOutlet 输入属性之外,还包含 ngComponentOutletInjector、ngComponentOutletContent 和 ngComponentOutletNgModuleFactory 输入属性,想深入了解的同学可以参考一下 Angular 官方的说明文档。

1
2
3
4
5
6
7
8
9
@Component({
selector: 'my-app',
template: `
<ng-template #alertContainer></ng-template>
<button (click)="createComponent('success')">Create success alert</button>
<button (click)="createComponent('danger')">Create danger alert</button>
<div *ngComponentOutlet="alertComponent"></div>
`
})

参考资源


欢迎小伙伴们订阅前端修仙之路,及时阅读 Angular、RxJS、TypeScript 和 Node.js 最新文章。

qrcode