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();
    //发送消息
    sendMessage(message: string) {
        this.msg.next(message);
    }
    //清除消息
    clearMessage() {
        this.msg.next();
    }
    //获取消息
    getMessage(): Observable {
        return this.msg.asObservable();
    }
}

app父组件获取消息

//app.component.ts
public alertMsg: Array