angular dynamic component 笔记
使用到动态组件是因为我在做一个Table的控件,表格中有按钮等控件,并具有相应逻辑,同时项目中多处使用到该表格,故想提取一个可复用的控件以减少工作量。主要参考的文章是大神的修仙之路Angular 4.x 动态创建组件以及官方文档Dynamic Component Loader;
这里主要简要记录一下我自己的理解。
动态组件的创建
- 在/src/app目录下通过以下命令可以创建一个简单的TestComponent
ng generate component test
- 对应需要引用该动态组件的父组件(eg: ParentComponent),首先我们要将TestComponent引入其对应的ParentModule
import { TestComponent } from '.../test.component'
import { CommonModule } from '@angular/common';@NgModule({imports: [...],declarations: [ ..., TestComponent ],entryComponents: [TestComponent]
})
*注意最后我们用了一个entryComponent的命令,这是因为一般而言,angular编译器会根据代码自动生成所有组件的ComponentFactory,但对于动态插入的组件,其在父组件的代码中没有对于的模板选择器(eg:<test></test>),故为了能让编译器能生成动态组件的ComponentFactory,需要人手告诉angular去生成。
Generally, the Angular compiler generates a ComponentFactory for any component referenced in a template. However, there are no selector references in the templates for dynamically loaded components since they load at runtime.
To ensure that the compiler still generates a factory, add dynamically loaded components to the NgModule's entryComponents array:
*ComponentFactory代码定义如下,我的理解它是angular编译得出的js方法,交给浏览器运行,从而用来实际创建组件;
class ComponentFactory<C> {get selector: stringget componentType: Type<any>get ngContentSelectors: string[]get inputs: {...}get outputs: {...}create(injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string | any, ngModule?: NgModuleRef<any>): ComponentRef<C>
}
*entryComponent则告诉angular编译器,在用户交互过程中,需要动态生成某个组件,故命令angular生成该组件的ComponentFactory,以供后续组件的动态创建使用。
*导入CommonModule,是为了其后使用ngIf,ngFor,<ng-template>等指令。
- 在ParentComponent中动态添加组件,代码如下:
...
import { ViewContainerRef, AfterViewInit, ViewChild, ComponentFactoryResolver} from '@angular/core';
import { TestComponent } from '.../test.component'
...
export class ParentComponent{@ViewChild("Container", { read: ViewContainerRef }) vcRef: ViewContainerRef;constructor(private componentFactoryResolver: ComponentFactoryResolver) { }...ngAfterViewInit() {let componentFactory = this.componentFactoryResolver.resolveComponentFactory(TestComponent);this.vcRef.clear();let dynamicComponent = vcRef.createComponent(componentFactory);...}
}
- 在test.component.html中添加代码如下:
<ng-template #Container></ng-template>
*ViewContainerRef 类型代表装载视图的容器类
Represents a container where one or more Views can be attached
*ViewChild用于获取对应ViewContainerRef中的第一个元素或对应的ViewContainerRef实例
You can use ViewChild to get the first element or the directive matching the selector from the view DOM. If the view DOM changes, and a new child matches the selector, the property will be updated.
*此处利用定义html锚点#container,当实例化ViewChild时,传入第一个参数为锚点名字“container”,第二个参数{read: <Type>}为查询条件,设置查询的类型,此处设置返回ViewContainerRef的实例;
*componentFactoryResolver提供生成componentFactory的方法;
*由于ViewChild所进行的视图查询是在ngAfterViewInit前调用的,所以对vcRef的操作要在ngAfterViewInit后进行,否则vcRef是undefined,最后利用vcRef的createComponent方法,根据生成的componentFactory,可动态组件;
*对组件dynamicComponent的操作,可通过以下代码进行,例如,动态组件TestComponent中有@Input() Data,可通过.data进行赋值;
(<any>dynamicComponent.instance).data = "test";
至此,为我对动态组件的理解。利用动态组件的Table控件实现会整理进下一篇文章。
angular dynamic component 笔记相关推荐
- Angular入门学习笔记
Angualr入门扫盲必备 声明:这篇是我学习angualr的笔记,可以转载,但必须注明来源作者 kone 并附上本文链接 A:环境,工具 1:先确保安装了nodejs和npm Nodejs npm ...
- Angular 4 学习笔记 从入门到实战 打造在线竞拍网站 基础知识 快速入门 个人感悟
最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app. 先上个效果图: 环境&版本信息声明 运行ng -v @ ...
- Angular快速学习笔记(3) -- 组件与模板
1. 显示数据 在 Angular 中最典型的数据显示方式,就是把 HTML 模板中的控件绑定到 Angular 组件的属性. 使用插值表达式显示组件属性 要显示组件的属性,最简单的方式就是通过插值表 ...
- Angular 4 学习笔记1
文章目录 一张图说明Angular程序架构 Angular开发环境搭建 项目文件夹和各部分关系 引入npm命令安装的外部模板 使用指令生成组件 启动项目指令 数据绑定 将css类绑定到html标签上 ...
- 4、Angular JS 学习笔记 – 创建自定义指令 [翻译中]
2019独角兽企业重金招聘Python工程师标准>>> 创建自定义指令 注意:本指南是针对已经熟悉AngularJS基础的开发者.如果您只是想要开始,建议您先去看教程.如果你在寻找指 ...
- Angular library 学习笔记
原文 Use cases for Angular libraries Angular 库有 2 个常见用例: 构建可重用的组件库以在应用程序之间共享. 构建共享服务层功能 - 例如. 用于处理外部数据 ...
- Angular Schematics 学习笔记
网址:https://angular.io/guide/schematics A schematic is a template-based code generator that supports ...
- Angular Universal 学习笔记 - 客户端渲染和服务器端渲染的区别
https://github.com/angular/universal Universal 的命名由来: We believe that using the word "universal ...
- Angular form学习笔记
https://angular.io/start/start-forms Angular里的form分成两部分: the objects that live in the component to s ...
最新文章
- 用QQ提问的技巧,用了之后可以提高效率,呵呵。
- 12 个非常有用的 JavaScript Hacks
- linux下构建Zabbix网络监控平台
- 那一年,整个游戏界差点因为一款垃圾游戏,而一同被“埋葬”
- 开源如何走向商业化?
- UNIX 环境高级编程(八)—— fork 函数
- 表达式,语句,变量与宏的一些概念
- 【matlab】:matlab中不断的出现计算过程怎么办
- ectouch添加手机注册框
- 基于BP神经网络PID控制+Simulink仿真
- tsconfig.json详细配置
- PC改变文档显示颜色,保护眼睛,缓解眼疲劳
- 从阿里云购买、域名购买、SSL免费购买到SSL集成开发(网络编程安全三)
- pycurl和urllib2的比较
- speccpu2006整型浮点型测试
- LeetCode算题——6月
- HarmonyOS+Django登录页面
- 如何写好Makefile
- 谷粒商城项目篇6_分布式基础完结篇_商品服务模块(品牌管理、平台属性、新增商品)、仓储服务模块(仓库管理)
- 继电器线圈泄放电路及触点RC吸收电路
热门文章
- ios plist_iOS属性列表(plist)示例
- java静态接口方法使用_使用静态方法对接口进行Java编程
- scala几种循环判断语句_Scala循环控制语句– while,while和for循环
- web前端开发示例_40多个针对Web开发人员HTML5教程和示例
- WPS配置工具参数 ksomisc.exe
- 将微信小视频发送给QQ好友
- 人工智能应用于自动驾驶技术中的优势
- Python基础笔记(四)切片、列表生成式、迭代
- vue-cli关闭eslint及配置eslint
- CKeditor4.7.3标准版图片上传及相关配置