无论你使用什么前端框架，组件之间的通讯都离开不以上几种方案，这些方案与具体框架无关
1.直接的父子关系：父组件直接访问子组件的 public 属性和方法或者@ViewChild实现
对于有直接父子关系的组件，父组件可以直接访问子组件里面 public 型的属性和方法，示例代码片段如下：
a)子组件里暴露公共的方法或者属性
父组件中的代码
[HTML] 纯文本查看 复制代码
<child #child></child>
<button (click)="child.childFn()" class="btn btn-success">调用子组件方法</button>
子组件中的代码，子组件必须暴露public的childFn方法
[JavaScript] 纯文本查看 复制代码
public childFn():void{
console.log("子组件的名字是>"+this.panelTitle);
}
b) 父组件中定义子组件的引用,通过引用调用子组件的方法或者属性
注意：引入ViewChild正确的语法是import { ViewChild } from '@angular/core';错误的语法是import { ViewChild } from '@angular/core/src/metadata/di';
父组件中的代码
[AppleScript] 纯文本查看 复制代码
@ViewChild(ChildComponent)
private childComponent: ChildComponent;
2.直接的父子关系：借助于 @Input 和 @Output 进行通讯
a) @Input的使用
父组件调用子组件标签的时候可以通过属性的形式将值传递给子组件,而@Input的作用就是声明属性
在子组件中声明一个属性 panelTitle
[AppleScript] 纯文本查看 复制代码
@Input()
public panelTitle:string;
在父组件中调用子组件,并且给panelTitle属性一个值
[AppleScript] 纯文本查看 复制代码
<child panelTitle="属性值"></child>
b) @Output的使用
@Output 的本质是事件机制，我们可以利用它来监听子组件上派发的事件
可以这样理解：通过output可以给子组件绑定指定事件
子组件上这样写：
[AppleScript] 纯文本查看 复制代码
@Output()
public follow = new EventEmitter<String>();//事件名
private clickHandler():void{
this.follow.emit("aaa");//aaa表示数据
}
[AppleScript] 纯文本查看 复制代码
<button class="btn btn-default" (click)="clickHandler()" >调用父组件的方法</button>
父组件上这样写
[AppleScript] 纯文本查看 复制代码
<app-child panelTitle="儿子" (follow)="doSomething($event)"></app-child>
[AppleScript] 纯文本查看 复制代码
private doSomething(message:String):void{
console.log(message);
}
3.没有直接关系：借助于 Service 单例进行通讯。
如果你在根模块（一般是 app.module.ts）的 providers 里面注册一个 Service，那么这个 Service 就是全局单例的，这样一来我们就可以利用这个单例的 Service 在不同的组件之间进行通讯了。
比较粗暴的方式：我们可以在 Service 里面定义 public 型的共享变量，然后让不同的组件都来访问这块变量，从而达到共享数据的目的。
优雅一点的方式：利用 RxJS，在 Service 里面定义一个 public 型的 Subject（主题），然后让所有组件都来subscribe（订阅）这个主题，类似于一种“事件总线”的效果。
[AppleScript] 纯文本查看 复制代码
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
/**
* 用来充当事件总线的Service
*/
@Injectable()
export class EventBusService {
public eventBus:Subject<string> = new Subject<string>();
constructor() { }
}
[AppleScript] 纯文本查看 复制代码
import { Component, OnInit } from '@angular/core';
import { EventBusService } from '../service/event-bus.service';
@Component({
selector: 'child-1',
templateUrl: './child-1.component.html',
styleUrls: ['./child-1.component.css']
})
export class Child1Component implements OnInit {
constructor(public eventBusService:EventBusService) { }
ngOnInit() {
}
public triggerEventBus():void{
this.eventBusService.eventBus.next("第一个组件触发的事件");
}
}
[AppleScript] 纯文本查看 复制代码
import { Component, OnInit } from '@angular/core';
import { EventBusService } from '../service/event-bus.service';
@Component({
selector: 'child-2',
templateUrl: './child-2.component.html',
styleUrls: ['./child-2.component.css']
})
export class Child2Component implements OnInit {
public events:Array<any>=[];
constructor(public eventBusService:EventBusService) {
}
ngOnInit() {
this.eventBusService.eventBus.subscribe((value)=>{
this.events.push(value+"-"+new Date());
});
}
}
4.利用 cookie 和 localstorage 进行通讯。
[AppleScript] 纯文本查看 复制代码
public writeData():void{
window.localStorage.setItem("json",JSON.stringify({name:'大漠穷秋',age:18}));
}
[AppleScript] 纯文本查看 复制代码
var json=window.localStorage.getItem("json");
// window.localStorage.removeItem("json");
var obj=JSON.parse(json);
console.log(obj.name);
console.log(obj.age);
5.利用 session 进行通讯
小结
组件间的通讯方案是通用的，无论你使用什么样的前端框架，都会面临这个问题，而解决的方案无外乎本文所列出的几种。
收藏
淘帖
踩
