美文网首页
关于 Angular 应用开发里 Subject 和 Behav

关于 Angular 应用开发里 Subject 和 Behav

作者: _扫地僧_ | 来源:发表于2023-09-18 14:00 被阅读0次

    笔者一直在 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 适用于需要初始值和对新订阅者广播最新值的情况。

    现在,让我们通过一个详细的示例来说明 SubjectBehaviorSubject 的用法和区别。

    示例场景:

    假设我们正在开发一个实时聊天应用,我们需要一个消息中心来接收和分发聊天消息。我们可以使用 SubjectBehaviorSubject 来实现这个消息中心。让我们分别考虑这两种实现方式。

    使用 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();
      }
    }
    

    总结:

    SubjectBehaviorSubject 都是 RxJS 中用于处理异步事件和数据流的强大工具。Subject 用于实现事件总线和多播数据流,而 BehaviorSubjectSubject 的基础上增加了初始值和记忆功能。在实际开发中,根据具体的需求,我们可以选择合适的工具来实现不同的功能。

    相关文章

      网友评论

          本文标题:关于 Angular 应用开发里 Subject 和 Behav

          本文链接:https://www.haomeiwen.com/subject/lxqamdtx.html