关于前端:关于-Angular-应用开发里-Subject-和-BehaviorSubject-的用法一例

4次阅读

共计 3047 个字符，预计需要花费 8 分钟才能阅读完成。

笔者始终在 SAP 中国研究院从事 Commerce Cloud 这款 Angular 利用的开发，最近工作中修复了一个 bug.

在 Spartacus UI 上点击 Create 按钮之后：

保护 User 的明细数据，而后点击 Save 按钮：

点击之后，咱们冀望的后果是收到一条 用户胜利创立 的提醒音讯，并且页面主动导航回到点击 Create 按钮的页面。但 bug 修复之前，并没有胜利创立的提醒音讯。

咱们在 Github 这个 PR 里修复了该问题。在解决方案里应用到了 Rxjs 的 Subject，我也顺带理解了 Subject 和 BehaviorSubject 的区别，本文将我的学习记录如下。

在 Angular 开发中，RxJS 是一个十分重要的库，它提供了弱小的响应式编程工具，用于解决异步操作和数据流。Subject 是 RxJS 中的一个要害工具，它是一种非凡类型的 Observable，同时也能够被用于触发和监听事件，是实现事件总线的一种形式。BehaviorSubject 则是 Subject 的一个变种，它在 Subject 的根底上减少了初始值和记忆性能。

Subject 的特点和用法：

Subject 是一个多播的 Observable，它既是观察者也是可察看对象。这意味着咱们能够通过 subscribe 办法订阅它，也能够通过 next 办法向它发送新值。Subject 会将这些值播送给所有订阅者。它通常用于实现事件总线、播送事件、多播数据流等场景。不过须要留神，Subject 在新的订阅者订阅时，不会向其发送之前发送的值。

BehaviorSubject 的特点和用法：

BehaviorSubject 继承自 Subject，在 Subject 的根底上减少了初始值和记忆性能。这意味着在 BehaviorSubject 被订阅时，它会发送其以后的值给订阅者。而当新的值通过 next 办法发送时，它会播送给所有订阅者，也会被记忆为新的以后值，以供新的订阅者应用。因而，BehaviorSubject 实用于须要初始值和对新订阅者播送最新值的状况。

当初，让咱们通过一个具体的示例来阐明 Subject 和 BehaviorSubject 的用法和区别。

示例场景：

假如咱们正在开发一个实时聊天利用，咱们须要一个音讯核心来接管和散发聊天音讯。咱们能够应用 Subject 或 BehaviorSubject 来实现这个音讯核心。让咱们别离思考这两种实现形式。

应用 Subject 实现音讯核心：

首先，咱们定义一个 MessageCenterService，其中蕴含一个 Subject 用于接管和散发音讯：

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs';

@Injectable({providedIn: 'root'})
export class MessageCenterService {private messageSubject = new Subject<string>();

  sendMessage(message: string): void {this.messageSubject.next(message);
  }

  getMessage(): Subject<string> {return this.messageSubject;}
}

在聊天界面组件中，咱们订阅音讯核心的 Subject 来接管和显示聊天音讯：

import {Component, OnDestroy} from '@angular/core';
import {MessageCenterService} from './message-center.service';
import {Subscription} from 'rxjs';

@Component({
  selector: 'app-chat',
  template: `
    <div *ngFor="let message of messages">{{message}}</div>
  `
})
export class ChatComponent implements OnDestroy {messages: string[] = [];
  subscription: Subscription;

  constructor(private messageCenter: MessageCenterService) {this.subscription = this.messageCenter.getMessage().subscribe(message => {this.messages.push(message);
    });
  }

  ngOnDestroy(): void {this.subscription.unsubscribe();
  }
}

应用 BehaviorSubject 实现音讯核心：

当初，咱们将 Subject 替换为 BehaviorSubject 来实现带有记忆性能的音讯核心：

import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs';

@Injectable({providedIn: 'root'})
export class MessageCenterService {private messageSubject = new BehaviorSubject<string>('Welcome to the chat');

  sendMessage(message: string): void {this.messageSubject.next(message);
  }

  getMessage(): BehaviorSubject<string> {return this.messageSubject;}
}

同样，咱们在聊天界面组件中订阅音讯核心的 BehaviorSubject 来接管和显示聊天音讯：

import {Component, OnDestroy} from '@angular/core';
import {MessageCenterService} from './message-center.service';
import {Subscription} from 'rxjs';

@Component({
  selector: 'app-chat',
  template: `
    <div *ngFor="let message of messages">{{message}}</div>
  `
})
export class ChatComponent implements OnDestroy {messages: string[] = [];
  subscription: Subscription;

  constructor(private messageCenter: MessageCenterService) {this.subscription = this.messageCenter.getMessage().subscribe(message => {this.messages.push(message);
    });
  }

  ngOnDestroy(): void {this.subscription.unsubscribe();
  }
}

总结：

Subject 和 BehaviorSubject 都是 RxJS 中用于解决异步事件和数据流的弱小工具。Subject 用于实现事件总线和多播数据流，而 BehaviorSubject 在 Subject 的根底上减少了初始值和记忆性能。在理论开发中，依据具体的需要，咱们能够抉择适合的工具来实现不同的性能。

正文完