angular dynamic component 笔记
使用到动态组件是因为我在做一个Table的控件,表格中有按钮等控件,并具有相应逻辑,同时项目中多处使用到该表格,故想提取一个可复用的控件以减少工作量。主要参考的文章是大神的修仙之路Angular 4.x 动态创建组件以及官方文档Dynamic Component Loader; 这里主要简要记录一下我自己的理解。 动态组件的创建
ng generate component test
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. *ComponentFactory代码定义如下,我的理解它是angular编译得出的js方法,交给浏览器运行,从而用来实际创建组件; class ComponentFactory<C> { get selector: string get 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,以供后续组件的动态创建使用。
... 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); ... } }
<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控件实现会整理进下一篇文章。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- Bootstrap -- 插件: 模态框、滚动监听、标签页
- 如何使用Angular 2 / Bootstrap 4为ng-bootstrap控件自定义
- 多次运行相同的docker镜像
- angular – 模块’DynamicTestModule’导入的意外值’Decor
- Scala编码风格和惯例?
- 这个导入在Scala中是什么意思?
- Net的wsdl生成webservice 异常:undefined simple or compl
- angularjs – 如何在$stateProvider的“解析”中使用工厂?
- 从零开始搭建口袋妖怪管理系统(4)-借助webpack4.6工程化项目
- scala – 为什么我不能flatMap一试?