angularjs2中的父子組件通訊

父組件模板中引用子組件

// father  template： ...

    <child-item [name] = "fatherItemName" > </child-item>

//...`

其中」fatherItemName」 爲父組件中的屬性，[name] 爲子組件的輸入

在子組件中使用 @Input() name 來接受父組件傳遞的值

若是在接收值前須要進行一些處理，可使用setter 攔截輸入屬性

_name: string = '';

@Input()

set nameStr(name: string){

_name = "father name:" + name;

}

這時的 _name 做爲臨時變量，做爲set 和get的中轉。其實_name就是咱們要組件中要用到的真實屬性
父組件中：
< child-item [namestr] = 「fatherItemName」 >
name -> namestr
使用getter 輸出

get nameStr(){ return _name; }

插值時 {{ nameStr }}

子到父組件之間的數據傳遞

1. 事件傳值

// father  template： ...

    <child-item (childEvent) = "fatherFunction($event)">  </child-item>

    //...

      export class FatherComponent{

        fatherFunction(){

          alert('hello!');

      }

    }

子組件

//...
    < p (click) = "clickThis"> click </ p>
    //...
    @Output() childEvent = new EventEmitter<boolean>();
    clickThis(){
    this.childEvent.emit();
    }

2.父組件經過局部變量獲取子組件的引用

<child-item [name] = "fatherItemName" #name > </child-item>

子組件經過#綁定一個name的局部變量來訪問子組件的屬性

3.使用@ViewChild 獲取子組件的引用

@ViewChild(ChildComponent)  child: ChildComponent;