angular4+rxjs订阅发布者模式实现组件中通信

2019独角兽企业重金招聘Python工程师标准>>>

一、首先引入rxjs  使用npm install rxjs --save

二、创建一个订阅发布者的中间件即middlereService 在service中引入rxjs       import {Observable,Subject} from "rxjs";

eg:示例

import {Injectable} from "@angular/core"; //angular核心依赖注入

import {Observable,Subject} from "rxjs"; //引入rxjs的对象  subject是一个攻受一体的对象，Observable是观察者，subscribe,是订阅者，注，记得z在destory周期函数里解约unsubscribe

@Injectable()

export class MessageService {

    private subject = new Subject();

  /* ngOnInit() {

    window['subject']=subject

   }*/

 

    send(message: any) {

        this.subject.next(message);

    }

 

    get(): Observable {

        return this.subject.asObservable();

    }

}

三、在 app.module.ts中进行注入，作为服务提供者。

eg:

import { MessageService } from './service/data/transChange';

@NgModule({

 providers: [

    MyHttp,

    MessageService,

    UserService

  ],

  entryComponents: [ModalComponent],

  bootstrap: [AppComponent]

})

export class AppModule { }

四、app.component.ts中进行初始化赋值给window对象，变为一个全局的对象就可以在全app，进行使用，而不用每次使用时要import引入一个service

eg:

import {Component, OnInit} from '@angular/core';

import {Router} from '@angular/router';

 

import {getInfo} from '../common/util/utils';

import {Store} from '@ngrx/store';

import { MessageService } from './service/data/transChange';

 

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

  title = 'app';

 

  constructor(private router: Router, private store: Store