基本情況有3種讶隐，父子組件，兄弟組件久又，任意組件的數(shù)據(jù)通信巫延。
父組件向子組件傳值時，在子組件中使用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=" 父組件的數(shù)據(jù) ";
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:`接受來自子組件的數(shù)據(jù):{{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()">發(fā)送 </button>`，
styleurls:['./child.component.css']
}),
export class ParentComponent{
public child="我是子組件";
@Output() messageEvent=new EventEmitter<string>()
constructor(){}
}
//發(fā)送子組件的值
send():void{
this.messageEvent.emit(this.message)
}
情形三：非父子時的情況
創(chuàng)建一個共享服務(wù)嗦随，通過Rxjs中的BehaviorSubject 來存儲數(shù)據(jù)列荔。這樣每個組件通過訂閱這個數(shù)據(jù)，當(dāng)這個數(shù)據(jù)發(fā)生變化的時候枚尼，都可以獲取最新的數(shù)據(jù)贴浙，rxjs中有個四個訂閱方式，適用不同的場景
ReplaySubject ,AsyncSubject, Subject
創(chuàng)建一個服務(wù)
import {Injectable } from "@angular/core";
import{BehaviorSubject }from "rxjs";
export class DataService{
public currentMessage=new BehaviorSubject<string>('默認(rèn)數(shù)據(jù)')署恍；
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的數(shù)據(jù):{{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()">發(fā)送 服務(wù)組件</button>`，
styleurls:['./child.component.css']
}),
export class ParentComponent implements onInit{
public message:string
@Output() messageEvent=new EventEmitter<string>()
constructor(private data:DataService){}
ngOnint(){
//通過服務(wù)接收數(shù)據(jù)
this.data.current.subscribe(res=>this.message=res)
}
//通過服務(wù)發(fā)送數(shù)據(jù)
send():void{
this.data.changeMessage('再次發(fā)送數(shù)據(jù)盯质！')
}
參考網(wǎng)址：https://ninesix.cc/post/sharing/sharing-between-angular-component.html
