Angular中父子组件传值以及组件之间通讯

一、父组件给子组件传值

1.子组件可以获取父组件的数据

案例如：header在不同的页面由父页面决定显示标题

1. 父组件通过属性绑定给子组件传值，父组件中先定义了数据public msg:string='我是数据'。
2. 父组件中调用子组件模板，先由属性接收<app-header [msg]="msg"></app-header> （此时数据正由父传向子）
3. 子组件引入input模块（装饰器），import {Component,OnInit,Input} from '@angular/core'
4. 子组件中的export中使用@input() msg:string装饰器,来接收父组件传过来的数据。
5. 子组件模板中可以使用{{ msg }} 动态接收父组件的数据了

2.子组件可以执行父组件的方法

1. 父组件中先定义了方法run() {alert('我是父组件的run方法')}。
2. 父组件中调用子组件模板，先由属性接收<app-header [msg]="msg" [run]="run"></app-header> （此时数据正由父传向子,run不带括号）
3. 子组件引入input模块（装饰器），import {Component,OnInit,Input} from '@angular/core'
4. 子组件中的export中使用@input() run:any装饰器,来接收父组件传过来的数据。此时run是个方法。
5. 子组件ts中可以使用this.run(); 调用父组件的方法了。

也可以直接传入整个父组件 [xxx]='this'

二、子组件给父组件传值

父组件可以通过AViewChild主动获取子组件的方法和数据, 见ViewChild

1.父组件可以获取子组件的数据

2.父组件可以获取子组件的方法

1. 子组件引入Output模块（装饰器）和EventEmitter事件驱动，import {Component,OnInit,Input,Output,EventEmitter} from '@angular/core'
2. 子组件中的export中使用@Output() private outer = new EventEmitter(); 声明outer变量接收EventEmitter对象的实例。
3. 子组件ts中可以使用方法this.outer.emit('从子组件来的数据'); 给父组件广播数据
4. 父组件调用子组件模板的时候，定义接收事件，<app-header (outer)="runInParent($event)"></app-header> （此时outer是要跟子组件名称一样，都叫outer。就是子组件的对象outer。）
5. 父组件接收到数据后会调用自己的runInParent()方法，这时就拿到了子组件的数据（父组件内runInParent(e)的e就是传过来的数据）
   一个子组件可以给很多父组件广播传值，可由父组件自己决定接收

三、非父子组件通信

1.组件之间传值

组件间传值

2.共享方法

可以使用服务service或者localstorage