如何實現angularjs2中父子組件的數據傳遞

這篇文章主要介紹如何實現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的中轉。

父組件中：

< 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;

以上是“如何實現angularjs2中父子組件的數據傳遞”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！