Angular兄弟组件之间使用rxjs的Observable发布订阅者模式进行交互

像素检测仪

已于 2024-03-11 18:17:03 修改

阅读量388

点赞数 5

分类专栏： angular 文章标签： angular.js 前端 javascript

于 2024-03-11 15:34:59 首次发布

本文链接：https://blog.csdn.net/qq_39981639/article/details/136625346

版权

angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了如何在Angular应用中使用发布/订阅者模式（通过`MessageService`），实现父子、兄弟组件之间的消息传递，利用`Observable`和`Subject`进行高效通信并管理订阅。

摘要由CSDN通过智能技术生成

用处

发布订阅者模式可以不用考虑组件之间的调用关系，用于父子，兄弟等组件传参。

创建一个message.service.ts文件

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class ShareMsgService {
  constructor() { }
  private msg = new Subject<any>();
  //发送消息
  sendMessage(message: any) {
    this.msg.next(message);
  }
  //清除消息
  clearMessage() {
    this.msg.next();
  }
  //获取消息
  getMessage(): Observable<any> {
    return this.msg.asObservable();
  }
}

发送消息

import { ShareMsgService } from '../../message.service';
constructor(
	private ShareMsgService: ShareMsgService,
) { }
this.ShareMsgService.sendMessage('想发送的消息')

接收消息

import { ShareMsgService } from '../../message.service';
import { Subscription } from "rxjs";
constructor(
	private ShareMsgService: ShareMsgService,
) { }
subscription: Subscription
ngOnInit() {
	// 订阅
	this.subscription = this.ShareMsgService.getMessage().subscribe(data => {
		this.accSettingFilter = data
	})
}

ngOnDestroy() {
	this.subscription.unsubscribe(); // 取消订阅
}