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

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

父元件向子元件傳遞資料

父元件傳遞資料到子元件通過@Input方式的現實方式

第一步：定義父元件
ParentComponent.ts（父元件）

import {Component, OnInit} from '@angular/core'
 
;

@Component({
selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})

export class ParentComponent {

private user: Object = {
name: '',
    age: '',
    number: ''
  };
  private parent_data: any;

  next() {
this.parent_data = this.user;
  }

}

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

(2).一個next()方法，next方法用於將頁面輸入的資料賦值給parent_data屬性

ParentComponent.html（父元件模版）

<div class="parent_div">
  <p>父元件</p>
  <div>
    <label>姓名：</label>
    <input type="text" [(ngModel)]="user.name">
  </div>
  <div>
    <label>年齡：</label>
    <input 
 
type="text" [(ngModel)]="user.age">
  </div>
  <div>
    <label>電話：</label>
    <input type="text" [(ngModel)]="user.number">
    <input type="button" value="傳遞資料到子元件" (click)="next()">
  </div>

  <!---子元件指令 start-->
  <app-childen [data]="parent_data"></app-childen>
  <!---子元件指令 end-->
</div>

對應的頁面：

表單輸入資料，點選頁面上的按鈕，呼叫頁面next()方法

(click)="next()"

next()方法內部將輸入的資料user賦值給parent_data。parent_data獲取到資料之後在模版中把獲取到的值再賦給子元件中先前定義好的data變數

<!---子元件指令 start-->
<app-childen [data]="parent_data"></app-childen>
<!---子元件指令 end-->

到這裡父元件就完成 類資料的傳遞，下面我們看看子元件怎麼去接受這個值？

第二步：定義子元件：
ChildenComponent.ts（子元件）

import {Component, OnChanges, Input} from '@angular/core';

@Component({
selector: 'app-childen',
  templateUrl: './childen.component.html',
  styleUrls: ['./childen.component.css']
})
export class ChildenComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges() {
    console.log(this.data);
  }
}

(1).這裡定義了一個類屬性data,並且用@Input裝飾器修飾，修飾過後的data變數就具備接受父元件傳過來的資料了，這裡定義的data就是在頁面接收父元件傳遞的data變數，看下面程式碼

<app-childen[data]="parent_data"></app-childen>

(2).還實現了一個onChanges介面，onChanges介面必須實現ngOnChanges方法，用來監控資料的變化，如果父元件的資料發生變化，我們這裡就輸出改變後的資料，父元件中表單輸入的值發生變化，再點選按鈕呼叫next()方法,ngonChanges會檢測到資料變化，console.log(this.data)列印新的輸出到控制檯

下面我們看看效果

個人學習心得，大神路過 ，不喜勿噴
有問題加我微信提問或者留言