前言

為了讓大家學(xué)習(xí)起來(lái)輕松、易懂，小編盡量做到篇幅短，語(yǔ)言通俗易懂，知識(shí)點(diǎn)分段來(lái)講，以免太長(zhǎng)了看起來(lái)很累，也很容易失去耐心閱讀下去，希望大家理解和支持，同時(shí)希望大家點(diǎn)贊和分享出去，讓更多的志同道合的朋友來(lái)學(xué)習(xí)

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)

下面我們看看效果

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論