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

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);
  }

}

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) {}
}

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

}