angular2 筆記

動態添加一個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。。。- -!