动态添加一个component：
import {
ViewContainerRef,
Component,
ComponentFactoryResolver,
ViewChild
} from '@angular/core';
import {InstanceComponent} from ' ./ instance.component';
@Component{
selector:'my-app'
template:`
<div #insert>
insert Component
</div>
`
}
export class AppComponent{
@ViewChild('insert',{read:ViewContainerRef})insert;
constructor(
private _vcr:ViewContainerRef
private _cfr:ComponentFactoryResolver
){}
ngAfterViewInit(){
let factory=this._cfr.resolveComponentFactory(InstanceComponent); //先转换成factoryComponent类型。
this._vcr.createComponent(factory); // 在本component末尾加入factory;
//或者this.insert.createComponent(factory); // 在#insert内部的末尾加入factory；
}
clear(){
this._cfr.clear() //清除加入的元素。
}
remove(){ //既然有加入component，那么也得写一个删除的方法。
let node=this.insert.nativeElement;
node.parentNode.removeChild(node);
}
}
angular中的NgModule中存在entryComponents属性，一般是不需要配置的。因为被bootStrap直接及递归引导的component和router中定义的component,会被自动添加入entryComponent。
可是我们要加入的这个component，就没有落脚之地，所以你需要自己在app.module中的entryComponents里加入这个component。
下面是一些API：
一，
@ViewChild:
@ViewChild('insert',{read:_params});
_params:默认值为ElementRef;另一个可选值为ViewContainer;
@ViewChildren:
在@ViewChild中填入component，难免该component不止被使用一次。所以在多次出现时，使用viewChildren;
@ContentChild:
首先你得分清content与view的差别。他们所对应的元素，view是在native element中定义，content是在host element中定义再映射入native中。
@ContentChild(component) ;获得projection component;
@ContentChildren:
相对于ContentChild选择多个。
使用进阶：
@Directive({
selector:'div',
})export class myDirective{
constructor(
private el:ElementRef;
){}
}
@Component ({
template:`
<div id='div1'> one</div>
<div> two </div>
`
})export class AppComponent{
@ViewChildren(myDirective)_md;
ngAfterView(){
this._md.map(node=>{
console.log(node.el.nativeElement.nodeName);
});
this._md.changes.subscribe(val=>{.....});
}
}
@ViewChildren返回一个：QueryList。拥有map方法，但它不属于Array。
myDirective将<div>绑定为一个Directive，并使其具有.el属性。其中第一个div多带一个id属性。注意，不做injector或者attr，将返回一个空的{}。
this._md.changes可以监听这些ViewChildren的变化，比如add,move,remove.
@ContentChildren。使用方法雷同。
二，动态 innerHTML。
ViewContainerRef.createEmbeddedView
@Component ({
template:`
<template #tp>
<h1> templateRef</h1>
</template>
`
})export class AppComponent{
@ViewChild('tp')tp;
constructor(private _vcr:ViewContainerRef){};
ngAfterViewInit(){
this._vcr.createEmbeddedView(tp);
}
}
@ViewChild('tp')得到的是一个templateRef；
通过这个方法，可以达成类似Jquery 中，$('<h1> templateRef</h1>').insertAfter('my-app')的效果。
三，私有注入。
ViewProviders:[]；
angular中除了惰性模块，一旦你使用providers注册服务，那它会立即提升为全局。
所以在一些特殊情况需要私有服务时，我们使用ViewProviders代替providers，因为ViewProviders内的服务，只能被自身及ViewChildren使用。
------------这个排版不好用啊。有时间自己搞几个class。。。- -!