前言

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

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

父組件向子組件傳遞數據

父組件傳遞數據到子組件通過@Input方式的現實方式

第一步：定義父組件

ParentComponent.ts

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

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

ParentComponent.html

對應的頁面：

表單輸入數據，點擊頁面上的按鈕，調用頁面next()方法

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

第二步：定義子組件：

ChildenComponent.ts

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

下面我們看看效果

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。