這篇文章主要為大家展示了“Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output有什么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output有什么用”這篇文章吧。

為佳木斯等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及佳木斯網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、佳木斯網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

Angular 提供了@Input和@Output語(yǔ)法來(lái)處理組件數(shù)據(jù)的流入流出，接下來(lái)我們通過(guò)@Input和@Output來(lái)演示父子組建之間的數(shù)據(jù)傳遞

父組件向子組件傳遞數(shù)據(jù)

父組件傳遞數(shù)據(jù)到子組件通過(guò)@Input方式的現(xiàn)實(shí)方式

第一步：定義父組件

ParentComponent.ts

(1).這里定義了兩個(gè)類屬性u(píng)ser和parent_data，

(2).一個(gè)next()方法，next方法用于將頁(yè)面輸入的數(shù)據(jù)賦值給parent_data屬性

ParentComponent.html

對(duì)應(yīng)的頁(yè)面：

表單輸入數(shù)據(jù)，點(diǎn)擊頁(yè)面上的按鈕，調(diào)用頁(yè)面next()方法

next()方法內(nèi)部將輸入的數(shù)據(jù)user賦值給parent_data。parent_data獲取到數(shù)據(jù)之后在模版中把獲取到的值再賦給子組件中先前定義好的data變量到這里父組件就完成 類數(shù)據(jù)的傳遞，下面我們看看子組件怎么去接受這個(gè)值？

第二步：定義子組件：

ChildenComponent.ts

(1).這里定義了一個(gè)類屬性data,并且用@Input裝飾器修飾，修飾過(guò)后的data變量就具備接受父組件傳過(guò)來(lái)的數(shù)據(jù)了，這里定義的data就是在頁(yè)面接收父組件傳遞的data變量，看下面代碼(2).還實(shí)現(xiàn)了一個(gè)onChanges接口，onChanges接口必須實(shí)現(xiàn)ngOnChanges方法，用來(lái)監(jiān)控?cái)?shù)據(jù)的變化，如果父組件的數(shù)據(jù)發(fā)生變化，我們這里就輸出改變后的數(shù)據(jù)，父組件中表單輸入的值發(fā)生變化，再點(diǎn)擊按鈕調(diào)用next()方法,ngonChanges會(huì)檢測(cè)到數(shù)據(jù)變化， console.log(this.data)打印新的輸出到控制臺(tái)

下面我們看看效果

以上是“Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！