基本情况有3种，父子组件，兄弟组件，任意组件的数据通信。
父组件向子组件传值时，在子组件中使用Input ，通过这种方式将模板传递给子组件。
情形一：父组件传值到子组件；
父组件
import {component} from "@angular/core";
@Component({
selector:'app-parent',
template:``，
styleurls:['./parent.component.css']
}),
export class ParentComponent{
public message=" 父组件的数据 ";
constructor(){}
}
子组件
import {component,Input} from "@angular/core";
@Component({
selector:'app-child',
template:`这是接受 {{message}}`，
styleurls:['./child.component.css']
}),
export class ParentComponent{
@Input() child:string;
constructor(){}
}
情形二： 子组件传值到父组件
第一种方法：
使用viewChild
父组件
import {component，viewChild, AfterViewInit} from "@angular/core";
import {ChildComponent} from "./child/child.component";
@Component({
selector:'app-parent',
template:`父组件 {{message}} `，
styleurls:['./parent.component.css']
}),
export class ParentComponent implements AfterViewInit{
@viewChild(ChildComponent) child;
public message:string;
constructor(){}
ngAfterViewInit(){
this.message=this.child.message;
}
子组件
import {component,Input} from "@angular/core";
@Component({
selector:'app-child',
template:``，
styleurls:['./child.component.css']
}),
export class ParentComponent{
public child="我是子组件";
constructor(){}
}
第二种：使用Output的方式emit广播出去。
父组件
import {component} from "@angular/core";
@Component({
selector:'app-parent',
template:`接受来自子组件的数据:{{message}} `，
styleurls:['./parent.component.css']
}),
export class ParentComponent{
public message:string;
constructor(){}
}
//接受子组件传递的值
getMessage(event){
this.message=event
}
子组件
import {component,Output，EventEmitter} from "@angular/core";
@Component({
selector:'app-child',
template:``，
styleurls:['./child.component.css']
}),
export class ParentComponent{
public child="我是子组件";
@Output() messageEvent=new EventEmitter()
constructor(){}
}
//发送子组件的值
send():void{
this.messageEvent.emit(this.message)
}
情形三：非父子时的情况
创建一个共享服务，通过Rxjs中的BehaviorSubject 来存储数据。这样每个组件通过订阅这个数据，当这个数据发生变化的时候，都可以获取最新的数据，rxjs中有个四个订阅方式，适用不同的场景
ReplaySubject ,AsyncSubject, Subject
创建一个服务
import {Injectable } from "@angular/core";
import{BehaviorSubject }from "rxjs";
export class DataService{
public currentMessage=new BehaviorSubject('默认数据')；
constructor(){}
changeMessage(message:string):void{
this.currentMessage.next(message)
}
}
组件1
组件1
import {component} from "@angular/core";
import {DataService } from "./service/data.service"
@Component({
selector:'app-parent',
template:`接受来自组件1的数据:{{message}} this.message=res)
}
}
组件2
组件
import {component} from "@angular/core";
import {DataService } from "./service/data.service"
Component({
selector:'app-child',
template:` {{message}}`，
styleurls:['./child.component.css']
}),
export class ParentComponent implements onInit{
public message:string
@Output() messageEvent=new EventEmitter()
constructor(private data:DataService){}
ngOnint(){
//通过服务接收数据
this.data.current.subscribe(res=>this.message=res)
}
//通过服务发送数据
send():void{
this.data.changeMessage('再次发送数据！')
}
参考网址：https://ninesix.cc/post/sharing/sharing-between-angular-component.html