angularjs2中父子組件的數(shù)據(jù)傳遞的實例代碼

更新時間：2017年07月05日 11:46:05 作者：何欣澄

本篇文章主要介紹了angularjs2中父子組件的數(shù)據(jù)傳遞的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

父到子組件之間的數(shù)據(jù)傳遞

父組件模板中引用子組件

 // father template： ...

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

//...`

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

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

如果在接收值前需要進(jìn)行一些處理，可以使用setter 攔截輸入屬性

_name: string = '';

@Input()

set nameStr(name: string){

_name = "father name:" + name;

}

這時的 _name 作為臨時變量，作為set 和get的中轉(zhuǎn)。

父組件中：

< child-item [namestr] = “fatherItemName” >

name -> namestr

使用getter 輸出

get nameStr(){ return _name; }

插值時 {{ nameStr }}

子到父組件之間的數(shù)據(jù)傳遞

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;

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJS 驗證碼60秒倒計時功能的實現(xiàn)
最近在做AngularJS 項目，這是寫的一個60秒倒計時功能，下面小編給大家介紹AngularJS 驗證碼60秒倒計時功能的實現(xiàn)，需要的朋友參考下吧
2017-06-06
AngularJS實現(xiàn)多級下拉框
這篇文章主要為大家詳細(xì)介紹了AngularJS實現(xiàn)多級下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Angular2 自定義validators的實現(xiàn)方法
angular 當(dāng)需要form表單需要驗證時，angular自帶了許多校驗器，但是很多時候自帶的無法滿足業(yè)務(wù)需求，這時候就需要自定義的校驗器，下面通過本文給大家分享Angular2 自定義validators的實現(xiàn)方法，需要的朋友參考下吧
2017-07-07
Angular中$state.go頁面跳轉(zhuǎn)并傳遞參數(shù)的方法
這篇文章主要介紹了angular中$state.go頁面跳轉(zhuǎn)并傳遞參數(shù)的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-05-05
AngularJS1.X學(xué)習(xí)筆記2-數(shù)據(jù)綁定詳解
本篇文章主要介紹了AngularJS1.X學(xué)習(xí)筆記2-數(shù)據(jù)綁定詳解，具有一定的參考價值，有興趣的可以了解一下。
2017-04-04
Angular 4依賴注入學(xué)習(xí)教程之Injectable裝飾器（六）
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之Injectable裝飾器的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。
2017-06-06
AngularJS 使用ng-repeat報錯 [ngRepeat:dupes]
這篇文章主要介紹了AngularJS 使用ng-repeat報錯 [ngRepeat:dupes] 的相關(guān)資料,需要的朋友可以參考下
2017-01-01
Angular5.1新功能分享
這篇文章主要介紹了Angular5.1新功能以及相關(guān)的用法，需要的朋友參考學(xué)習(xí)下吧。
2017-12-12
Angular.js組件之input mask對input輸入進(jìn)行格式化詳解
這篇文章主要給大家介紹了關(guān)于Angular.js組件之input mask對input輸入進(jìn)行格式化的相關(guān)內(nèi)容，文中通過示例代碼詳細(xì)介紹了將銀行卡號和日期的方法，需要的朋友們可以參考借鑒，下面來一起看看吧。
2017-07-07
AngularJS 單元測試（一）詳解
這篇文章主要介紹了AngularJS 單元測試（一）詳解的相關(guān)資料,需要的朋友可以參考下
2016-09-09