Angular 高级教程--基于 RxJS Subject的组件间通信

淡淡的烟草味﹌ 2023-06-09 03:57 93阅读 0赞

Subject包含四种类型分别是AsyncSubject、BehaviorSubject、ReplaySubject和PublishSubject。我们以BehaviorSubject为例：

## 1.BehaviorSubject ##

Observer会接收到BehaviorSubject被订阅之前的最后一个数据，再接收订阅之后发射过来的数据。如果BehaviorSubject被订阅之前没有发送任何数据，则会发送一个默认数据。

画面效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70][]

**message.service.ts**

import { Injectable } from '@angular/core';
    import { BehaviorSubject } from 'rxjs';
    
    @Injectable()
    export class MessageService {
      public subject = new BehaviorSubject<string>('默认数据');
    
      setMessage(value: string): void {
        this.subject.next(value);
      }
    }

**home.component.ts**

import { Component } from '@angular/core';
    import { MessageService } from '../../services/message.service';
    
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html'
    })
    export class HomeComponent {
    
      public msg: string = '初始值';
    
      constructor(private messageService: MessageService) { }
    
      click() {
        this.messageService.setMessage(this.msg);
      }
    }

**home.component.html**

<div style="background: lightsteelblue;padding: 10px;height: 200px;">
        <p>这是HOME组件</p>
        <p>
            <input type="text" [(ngModel)]="msg">
            <input type="button" (click)="click()" value="信息变更">
        </p>
    </div>

**left.component.ts**

import { Component, OnDestroy } from '@angular/core';
    import { Subscription } from 'rxjs';
    import { MessageService } from '../../services/message.service';
    
    @Component({
      selector: 'app-left',
      templateUrl: './left.component.html'
    })
    export class LeftComponent implements OnDestroy {
      public msg: string;
      public sucription: Subscription;
    
      constructor(private messageService: MessageService) {
        this.sucription = this.messageService.subject.subscribe((msg: string) => {
          console.log('Left:' + msg);
          this.msg = msg;
        });
      }
    
      ngOnDestroy() {
        this.sucription.unsubscribe();
      }
    }

**left.component.html**

<div style="background: wheat;padding: 10px;float: left;width: 300px;height: 200px;">
        <p>我是LEFT组件</p>
        <p>从HOOME组件取得的值：{
       {msg}}</p>
    </div>

**top.component.ts**

import { Component, OnDestroy } from '@angular/core';
    import { Subscription } from 'rxjs';
    import { MessageService } from '../../services/message.service';
    
    @Component({
      selector: 'app-top',
      templateUrl: './top.component.html'
    })
    export class TopComponent implements OnDestroy {
      public msg: string;
      public sucription: Subscription;
    
      constructor(private messageService: MessageService) {
        this.sucription = this.messageService.subject.subscribe((msg: string) => {
          console.log('Top:' + msg);
          this.msg = msg;
        });
      }
    
      ngOnDestroy() {
        this.sucription.unsubscribe();
      }
    }

**top.component.html**

<div style="background: gainsboro;padding: 10px;">
        <p>我是TOP组件</p>
        <p>从HOOME组件取得的值：{
       {msg}}</p>
    </div>

**app.module.ts**

import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppComponent } from './app.component';
    import { FormsModule } from '@angular/forms';
    import { HomeComponent } from './components/home/home.component';
    import { LeftComponent } from './components/left/left.component';
    import { TopComponent } from './components/top/top.component';
    import { MessageService } from './services/message.service';
    
    @NgModule({
      declarations: [AppComponent, HomeComponent, LeftComponent, TopComponent],
      imports: [BrowserModule, FormsModule],
      providers: [MessageService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

**app.component.html**

<app-top></app-top>
    <app-left></app-left>
    <app-home></app-home>

## 2. AsyncSubject ##

Observer会接收AsyncSubject的onComplete()之前的最后一个数据。

注意，subject.onComplete()必须要调用才会开始发送数据，否则Subscriber将不接收任何数据。

## 3. ReplaySubject ##

ReplaySubject会发射所有来自原始Observable的数据给观察者，无论它们是何时订阅的。ReplaySubject除了可以限制缓存数据的数量和还能限制缓存的时间。

## 4. PublishSubject ##

Observer只接收PublishSubject被订阅之后发送的数据。

一句话总结一下四个Subject的特性。

<table> 
 <thead> 
  <tr> 
   <th>Subject</th> 
   <th>发射行为</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>AsyncSubject</td> 
   <td>不论订阅发生在什么时候，只会发射最后一个数据</td> 
  </tr> 
  <tr> 
   <td>BehaviorSubject</td> 
   <td>发送订阅之前一个数据和订阅之后的全部数据</td> 
  </tr> 
  <tr> 
   <td>ReplaySubject</td> 
   <td>不论订阅发生在什么时候，都发射全部数据</td> 
  </tr> 
  <tr> 
   <td>PublishSubject</td> 
   <td>发送订阅之后全部数据</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70]: /images/20230531/a30f1e6ce81849759f22d88789e6f333.png