目錄結構

一、父元件==>子元件傳值

       父元件 about.ts：

public parentVal="我是父元件的值";

   父頁面 about.html：

 <child [parentVal]="parentVal"></child>

   子元件 child.ts:

      1、引入input模組

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

      2、接收父元件傳的引數，引數名需要與父元件頁面中中括號設定的名稱一樣

  @Input () parentVal:any;

 子頁面 child.html

  <p>{{parentVal}}</p>

二、子元件向父元件傳值

1.  子元件 child.ts 引入 Output  和 EventEmitter

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

2、子元件中 child.ts 例項化  EventEmitter

@Output() fromChild=new EventEmitter();
 

3、子元件通過 EventEmitter  物件 fromChild例項廣播資料

this.fromChild.emit('我是從子元件來的');

4、父元件呼叫子元件的時候，定義接收事件 , fromChild 就是子元件的 EventEmitter  物件 fromChild

<child (fromChild)="receiveVal($event)"></child>

5、父元件接收到資料會呼叫自己的receiveVal()方法，這個時候就能拿到子元件的資料

receiveVal(e){
    console.log(e);
  }