Angular 6 组件之间的数据通信

基本情况有3种，父子组件，兄弟组件，任意组件的数据通信。

父组件向子组件传值时，在子组件中使用Input ，通过这种方式将模板传递给子组件。

情形一：父组件传值到子组件；

父组件
import {component} from "@angular/core";

@Component({
selector:'app-parent',
template:`<app-child   [child]="message"><app-child>`，
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}}  <app-child><app-child>`，
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}}  <app-child (messageEvent)="getMessage($event)"><app-child>`，
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:`<button (click)="send()">发送 </button>`，
styleurls:['./child.component.css']
}),

export class ParentComponent{
public child="我是子组件";

@Output() messageEvent=new EventEmitter<string>()
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<string>('默认数据')；
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}}  <a`，
styleurls:['./parent.component.css']
}),

export class ParentComponent{
public  message:string;
constructor( private data :DataService){

this.data.currentMessage.subscribe(res=>this.message=res)
}
}

组件2

组件
import {component} from "@angular/core";
import {DataService } from "./service/data.service"
Component({
selector:'app-child',
template:` {{message}}<button (click)="send()">发送 服务组件</button>`，
styleurls:['./child.component.css']
}),

export class ParentComponent implements onInit{

public message:string
@Output() messageEvent=new EventEmitter<string>()
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