1.父元件呼叫子元件的時候傳入資料

<app-header [msg]="massage"></app-header>

2.子元件引入input模組

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

3.子元件@input接收父元件傳過來的資料

export class HeadrComponent implements OnInit {

@Input()msg:string

}

4.子元件使用父元件的資料

<h2>{{msg}}</h2>

二、子元件通過@output觸發父元件的方法

1.子元件引入Output和EventEmitter

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

2.子元件中例項化EventEmitter

@Output() private outer=new EventEmitter<string>();

3.子元件通過EventEmitter物件outer例項廣播資料

sendParent(){

　　this.outer.emit('msg from child')

}

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

<app-header (outer)="runParent($event)"></app-header>

5.父元件接收到資料會呼叫自己的runParent方法，這時候就能拿到子元件的資料

runParent(msg:string){

　　　alert(msg);

}

三、父元件通過@ViewChild主動獲取子元件的資料和方法

1.呼叫子元件給子元件定義名稱

<app-footer #footerChild><app-footer>

2.引入viewChild

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

3.ViewChild和剛才的子元件關聯起來

@ViewChild('footerChild')footer;

4.呼叫子元件

run(){

　　this.footer.footerRun();

}

四、非父子元件通訊

1、公共服務

2、localstorage(推薦）

3、cookie