angular 学习笔记 ( Dynamic Component 动态组件)

动态组件分 2 种 

1. Jit

2. Aot

Jit 的情况下你可以动态的写组件模板, 最后 append 出去, 类似 ng1 的 $compile 

Aot 的话, 模板是固定的, 我们只是可以动态创建 component 然后 append 出去

这一篇只会谈及 Aot 

 

要知道的事项 : 

1. 所有要动态的组件除了需要 declarations之外还要声明到 entryComponents 里头, 原因是 ng 是通过扫描模板来 import component class 的, 动态组件不会出现在模板上所以我们要用另一个 way 告诉 ng。

providers: [
{provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: [AComponentClass, BComponentClass], multi: true}
]

要方便扩展的话可以用 provides, ng-router 也是用这个实现的.

2. 目前只有动态组件，没有动态指令 (呃..所以动态创建的组件就不能附带指令咯.../.\)

3. 例子 

@Component({
selector: 'aaa',
template: ``
})
export class AAAComponent implements OnInit, AfterContentInit {
constructor(
private vcr: ViewContainerRef,
private cfr: ComponentFactoryResolver
) { }

@ContentChildren("dynamic", { read: ElementRef }) elem: QueryList<ElementRef>  //read 的作用是强转类型

ngOnInit() {

}

ngAfterContentInit() {
let providers = ReflectiveInjector.resolve([AbcService]); //为组件添加 providers
let injector = ReflectiveInjector.fromResolvedProviders(providers, this.vcr.parentInjector); //创建注入器给 component (记得要继承哦)
let factory = this.cfr.resolveComponentFactory(AbcComponent); //创建 component 工厂
let component = factory.create(injector,[[this.elem.first.nativeElement],[this.elem.last.nativeElement] ]); //创建 component, 这是就把注入器放进了, 后面的 array 是给 ng-content 用的
component.instance.name = "keatkeat"; // 对 input, output 做点东西
this.vcr.insert(component.hostView, 0); // 插入到模板中  0 是 position, 如果是 0 其实可以不用放.

// 如果不需要设定 providers 的话，可以省略一些 :
// let factory = this.resolver.resolveComponentFactory(AbcComponent);
// let component = this.vcr.createComponent(factory, 0);
// component.instance.name = "keatkeat";
}
}

里头说的 ng-content, 就是 Projectable nodes , 我个人认为这个做法还不太理想，因为 ng-content 应该是可以通过 select 找到对应的 tranclude 的，不过这里的参数 array 已经固定了 tranclude 的位置. 

所以目前, 如果你要做类似 tranclude 的事情, 改用 input 传递 templateRef 反而会比较容易控制. 

类似这样 

@Component({
template : `
<p>final</p>
<template [ngTemplateOutlet]="template" [ngOutletContext]="{ innerValue : 'huhu' }" ></template>
`,
selector : "final"
})
export class FinalComponent implements OnInit {
constructor(
) { }

@Input()
template : TemplateRef<any> //传进来

ngOnInit() {
console.log(this.template);
}
}

 4. 个人的想法 

一个动态组件应该和平时的组件必须是一样的，意思是我们可以随时把任何一个组件改成动态调用的方式. 

不过目前 ng 支持的不是很好

-input, output (支持)

-tranclude (Projectable nodes 显然和 ng-content配合不上)

-在 component 上放指令 (动态创建的 component, 没办法加上指令, 这导致了 dynamic accessor 很难写)

例子 

@Component({
templateUrl : "./debugTwo.component.html"
})
export class DebugTwoComponent implements OnInit, AfterViewInit {

constructor(
private fb : FormBuilder,
private cfr : ComponentFactoryResolver
) { }

form : FormGroup
@ViewChild("target", { read : ViewContainerRef }) target : ViewContainerRef
ngOnInit() {

this.form = this.fb.group({
age : [0]
});
}

ngAfterViewInit()
{
let factory = this.cfr.resolveComponentFactory(AccessorComponent);
let component = this.target.createComponent(factory, 0);
let ctrl = this.form.controls["age"];
component.instance.writeValue(ctrl.value); //需要手动去调用 writeValue, registerOnChange, registerOnTouched, 如果可以直接加上 formControlName 指令，就方便多了.
component.instance.registerOnChange((v) => {
ctrl.setValue(v);
});
//component.instance.template = this.template;
}
}

 

5. 一些常用到的类 

-ViewContainerRef : 好比一个 root div, 通常我们引用它目的就是 append element 进去.

 常用 : createEmbeddedView, createComponent, insert

-TemplateRef : 指的是 <template> 里面的内容.  

 常用 : createEmbeddedView

-ElementRef : dom 

 常用 : nativeElement (获取 dom 对象引用)