Angular中利用rxjs库的Subject多播解决在第一次订阅时进行初始化操作(如第一次订阅时从服务器获取数据)

Posted 2021-02-20 Laeni

 

 

rxjs 库中 Subject 类可以用于实现多播，其本身已经有多个实现（可参考【Rxjs】 - 解析四种主题Subject），但是都是需要手动操作Subject对象进行发布。

 

这里通过继承 BehaviorSubject（Subject的实现类，也可以直接继承Subject，但这里考虑到可能会用到初始值的时候）实现在第一次订阅（调用subscribe方法）时进行初始化（可以从服务器获取数据）。

第一步: InitSubject 类定义

import {BehaviorSubject, Subscriber, Subscription} from ‘rxjs‘;

/**
 * 第一次订阅时执行初始化操作.
 */
export class InitSubject<T> extends BehaviorSubject<T> {
  /**
   * 是否为第一次
   */
  private first = true;

  constructor(initValue: T, private init: () => void = () => {}) {
    super(initValue);
  }

  /** @deprecated This is an internal implementation detail, do not use. */
  _subscribe(subscriber: Subscriber<T>): Subscription {
    if (this.first) {
      this.first = false;
      if (typeof this.init === ‘function‘) {
        this.init();
      }
    }
    return super._subscribe(subscriber);
  }

}

 

 

第二步: Service中定义可观察对象

import {Injectable} from ‘@angular/core‘;
import {InitSubject} from ‘../InitSubject‘;
import {HttpClient} from ‘@angular/common/http‘;
import {retry} from ‘rxjs/operators‘;

/**
 * 获取配置系统管理的应用列表等.
 */
@Injectable({
  providedIn: ‘root‘
})
export class AppService {
  /**
   * 用于发布信息,这里构造方法第二个参数传入自定义初始化逻辑.
   */
  public app$ = new InitSubject<Array<InternalApp>>(null, () => {
    this.http.get<any>(‘/get_xxx‘).pipe(retry(3))
        .subscribe(value => this.app$.next(value.data));
  });

  constructor(private http: HttpClient) {}
}

 

第三步: Service中定义可观察对象

import {Component, OnDestroy, OnInit} from ‘@angular/core‘;
import {AppService} from ‘../../service/app.service‘;
import {Subscription} from ‘rxjs‘;

@Component({
  selector: ‘app-home‘,
  templateUrl: ‘./home.component.html‘,
  styleUrls: [‘./home.component.less‘]
})
export class HomeComponent implements OnInit, OnDestroy {
  // 应用信息
  app: Array<any>;
  // 应用信息变更监听
  appSubscription: Subscription;

  constructor(private appService: AppService) { }

  ngOnInit(): void {
    // 初始化时定义订阅并监听数据变化
    this.appSubscription = this.appService.app$.subscribe(value => this.app = value);
  }
  ngOnDestroy(): void {
    // 销毁时取消订阅,防止内存泄露
    this.appSubscription.unsubscribe();
  }

}