快捷導(dǎo)航

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 霸道的過濾器小結(jié)
本篇文章主要介紹了AngularJS 霸道的過濾器小結(jié)，在實際操作中，我們需要對統(tǒng)一數(shù)據(jù)源進(jìn)行多次轉(zhuǎn)換，本文詳細(xì)討論有關(guān)過濾器的用法。
2017-04-04
Angular5中調(diào)用第三方庫及jQuery的添加的方法
這篇文章主要介紹了Angular5中調(diào)用第三方庫及jQuery的添加的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
angular ng-model 無法獲取值的處理方法
今天小編就為大家分享一篇angular ng-model 無法獲取值的處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
詳解Angular路由動畫及高階動畫函數(shù)
本文主要講解了Angular的路由動畫和高階動畫函數(shù)，對此感興趣的同學(xué)，可以把代碼親自實驗一下，理解其原理。
2021-05-05
利用Angular.js限制textarea輸入的字?jǐn)?shù)
相信在大家已經(jīng)學(xué)習(xí)了足夠多關(guān)于AngularJS的知識后，就可以開始創(chuàng)建第一個AngularJS應(yīng)用程序，這篇文章通過示例給大家介紹如何利用Angular.js限制textarea輸入的字?jǐn)?shù)，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-10-10
AngularJS控制器之間的通信方式詳解
這篇文章主要介紹了AngularJS控制器之間的通信方式,結(jié)合實例形式分析了作用域繼承方式、事件方式及angular服務(wù)方式等常用的通信方式,需要的朋友可以參考下
2016-11-11
AngularJs表單驗證實例詳解
這篇文章主要介紹了用AngularJs驗證表單實例詳解的相關(guān)資料,需要的朋友可以參考下
2016-05-05
Angular 2.0+ 的數(shù)據(jù)綁定的實現(xiàn)示例
本篇文章主要介紹了Angular 2.0+ 的數(shù)據(jù)綁定的實現(xiàn)實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
AngularJS 異步解決實現(xiàn)方法
這篇文章主要介紹了AngularJS 異步解決實現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下
2017-06-06
Angularjs中ng-repeat-start與ng-repeat-end的用法實例介紹
這篇文章主要給大家介紹了Angularjs中ng-repeat-start與ng-repeat-end的用法，文章開始先進(jìn)行了簡單的介紹，而后通過完整的實例代碼詳細(xì)給大家介紹這兩者的用法，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-12-12