码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-05-03 20:19:42      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:变化   blank   bsp   现在   less   operator   ted   pps   angular   

 

 

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

}

 

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

标签:变化   blank   bsp   现在   less   operator   ted   pps   angular   

原文地址:https://www.cnblogs.com/laeni/p/12823166.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!