Angular用observable解决组件间通信

现在前端任意一款主流框架因为都是模块化结构，所以都绕不开组件或者模块之间通信。大部分时间我们说解决组件之间通信是子组件向父传值，一般子组件的值会继承父组件，父变子跟着变，但子变父不会变。

那么今天就来看看在angular4中如何使用Observable来实现子向父传值，当然它也可以在任意两个组件或多个组件中传值。这个方案比官方文档提供的单纯的父子组件关系的解决方案应用范围更广。

实现一个消息通知demo，在任何一个组件调用显示消息方法，在根组件就会显示3秒的消息提示框。

文件结构

1. 父组件：app.component.ts、app.component.html
2. 子组件：home.component.html、home.component.html
3. 服务：shared.service.ts

关键方法

1. Observable.subscribe() 用于订阅发送可观察对象的消息
2. Subject.next() 用于向观察者对象发送消息，然后将其发送给改观察者的所有订阅者
3. Subject.asObservable() 返回一个可观察对象，一旦值变化，便会同时向它的订阅者更新消息。

shared.service公共服务

//shared.service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class SharedService {
    private msg = new Subject<any>();
    //发送消息
    sendMessage(message: string) {
        this.msg.next(message);
    }
    //清除消息
    clearMessage() {
        this.msg.next();
    }
    //获取消息
    getMessage(): Observable<any> {
        return this.msg.asObservable();
    }
}

app父组件获取消息

<!--app.component.html-->
<p-growl [(value)]="alertMsg"></p-growl>

//app.component.ts
public alertMsg: Array<object>;
constructor(private sharedService: SharedService) {}

ngOnInit() {
    //消息提示 从service获取消息内容
    this.sharedService.getMsg().subscribe(value => {
        this.alertMsg = value;
    })

}

home子组件发送消息

<!--home.component.html-->
<button (click)="sendMessage()">Send Message</button>

//home.component.ts
constructor(private sharedService: SharedService) {}

public sendMessage() {
        //发送消息
        this.sharedService.sendMessage('显示成功');
    }

至此，关于子组件向父组件传值就到这里了，主要是学会利用Observable来传值，需要注意一点的是最新版的rxjs不支持该方式，应该有其他方法代替，这个用的rxjs版本是V5.1.0，是可以使用的。