angular5下通过发布-订阅模式实现组件之间的通信(RXJS)

在实际的开发中,当我们遇到非父子组件进行通信的时候,可以使用发布-订阅模式来实现组件之间的通信

1.使用Subject ----subscribe实现发布订阅,通过这种方式可以实现非父子组件传参,也可以应用到父子组件之间的传参

• 1.首先创建一个service,在这里定义Subject

		import { Injectable } from '@angular/core';
		import { Subject, Observable } from 'rxjs';
		@Injectable() // 注入
		export class MyMessageService {
		 // 这里可以创建多个subject
		  subject = new Subject<any>();
		}

• 2.将创建的service引入到主模块的module中(app.module.ts)

	providers: [ MyMessageService]

• 3.创建两个子组件和一个父组件,并且将两个子组件放到父组件中()
  第一个子组件的html文件关键代码

	<h1>我是children组件</h1>
	<h2>{{message}}</h2>

　　第一个子组件的ts文件关键代码

    // 订阅
	import { Component, EventEmitter, Input, OnInit, Output, OnChanges, Injectable } from '@angular/core';
	import { MyMessageService } from '../my-Message.service';
	import { Subscription } from 'rxjs';
	@Component({
	  selector: 'app-child-child',
	  templateUrl: './child-child.component.html',
	  styleUrls: ['./child-child.component.css']
	})
	export class ChildChildComponent implements OnInit, OnChanges {
	  message: any;
	  ngOnInit() {
	    this.$dingyueService.subject.subscribe(result => {
	      this.message = result;
	    });
	  }
	}

　　第二个子组件的html关键代码

	<input [(ngModel)]="fa"/>
	<button (click)="fabu()">发布</button>
	<button (click)="cancle()">取消</button>

　　第二个子组件的ts关键代码

	import {Component, OnInit} from '@angular/core';
	import { MyMessageService } from '../my-Message.service';
	@Component({
	  selector: 'app-second-child',
	  templateUrl: './second-child.component.html',
	  styleUrls: ['./second-child.component.css']
	})
	export class SecondChildComponent implements OnInit {
	  secondValue: string;
	  fa: '';
	  constructor(private $service: MyMessageService) { }
	  ngOnInit() {}
	  fabu() {
	    // 发布
	    this.$fabuService.subject.next(this.fa);
	  }
	 // 手动取消订阅,取消之后两个组件之间不会再进行通信
	cancle() {
    this.$fabuService.subject.unsubscribe();
       }
   }

　　父组件中引用子组件

	  <app-child-child></app-child-child>
	  <app-second-child></app-second-child>

• 4.完成
  在输入框中输入一个值,点击发布按钮,SecondChildComponent组件中输入框的值就会发送到ChildChildComponent中;
  点击取消按钮,然后在SecondChildComponent组件中输入值,点击发送,ChildChildComponent的值不会发生变化,成功取消了订阅;

总结

(一)、使用该方式可以实现父子组件之间和非父子组件之间的通信,通常我们应用在非父子组件之间的通信上;
(二)、Subject是一种可以多路推送的可观察对象,它维护着自己的Observable;
(三)、每一个Subject都是一个Observable;