前言

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

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

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

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

第一步：定義父組件

ParentComponent.ts

(1).這里定義了兩個類屬性user和parent_data，

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

ParentComponent.html

對應(yīng)的頁面：

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

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

第二步：定義子組件：

ChildenComponent.ts

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

下面我們看看效果

總結(jié)

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

最新評論