Angular 动态创建与操纵组件

Angular 除了可以动态创建嵌入式视图 ,亦可利用现有的组件类动态在组件中创建一个组件。这种方法常用在弹出层、对话框等场景下。

组件与编译器

大部分场景下我们使用的组件都像普通元素一样放在组件的模板中。在浏览器执行时,Angular 编译器会对组件模板进行解析,对其中包含的组件、指令、管道等 Angular 自定义对象进行编译,转化为可直接运行的前端代码。可以说,编译器充当了框架与可执行代码之间的桥梁。

而对动态组件来说,由于其在编译阶段不在组件模板中,因此默认情况下不会被编译,无法直接被调用。为此必须在模块中用 entryComponents 显式地指定需要动态创建的组件,提示编译器对此组件进行编译,方能在运行时使用。

以 NzAlertComponent(ng-zorro)为例,假如我们想动态创建,就可以在模块的 entryComponents 中指定 NzAlertComponent 让框架在预编译阶段对此组件进行解析。

动态创建组件

首先我们需要在组件中注入 ComponentFactoryResolver 解析器,生成一个对象 resolver。

然后利用 resolver 的 resolveComponentFactory 方法,把已经编译好的组件 NzAlertComponent 制造成一个工厂类,然后我们可以将这个工厂类作为参数传入我们预先设定好的容器对象中,通过容器的 createComponent 方法创建一个组件。

然后我们可以利用组件引用对象 instance 来使用组件的输入和输出属性。

总结

总体来说动态创建组件应用场合较为狭窄,一般来说静态组件无法处理的场景才需要考虑到动态创建组件的可能性。

参考链接

Dynamic Component Loader

Angular 4.x 动态创建组件

发表评论

电子邮件地址不会被公开。 必填项已用*标注