Вложенная подписка в Angular - проблема с производительностью?

Question

У меня есть subscription для хранения и на основе значения из хранилища, выполняется вызов службы, которую я subscribe продвигаю.

Влияет ли вложенная подписка на производительность? Хотя onDestroy subscription уничтожено.

ngOnInit() {
  this.currentYear = (new Date).getFullYear();
  this.statesubscription = this.contentServerStore
    .pipe(select(getContentServerState))
    .subscribe(val => {
      if (!this.checkValuesService.isNullOrUndefined(val) &&
        val.region.toUpperCase() == Constants.region.us
      ) {
        let contentRequest = new ContentRequest();
        this.regionService.getRegion(contentRequest).subscribe(region => {
          if (!this.checkValuesService.isNullOrUndefined(region)) {
            this.regionContent = <string>this.domSanitizer
              .bypassSecurityTrustHtml(region[Constants.regionKey]);
          }
        });
      }
    });
}

Answer 1

Да. subscribe Бинг во вложенном виде, как вы делаете, определенно является анти-паттерном.

Вы, вероятно, можете попробовать использовать map и switchMap операторов вместе с async трубкой в ​​шаблоне для достижения этой цели.

Здесь, дайтеэто попытка:

ngOnInit() {
  this.currentYear = (new Date).getFullYear();
  this.regionContent$ = this.contentServerStore
    .pipe(
      select(getContentServerState),
      map(val => {
        if (!this.checkValuesService.isNullOrUndefined(val) &&
          val.region.toUpperCase() == Constants.region.us
        ) {
          let contentRequest = new ContentRequest();
          return this.regionService.getRegion(contentRequest)
            .pipe(
              switchMap(region => {
                if (!this.checkValuesService.isNullOrUndefined(region)) {
                  return <string > this.domSanitizer
                    .bypassSecurityTrustHtml(region[Constants.regionKey]);
                } else {
                  return of(`<h1>No Content Found!</h1>`);
                }
              })
            );
        }
      })
    );
}

В шаблоне вы можете сделать что-то вроде этого:

<div [innerHTML]="regionContent$ | async"></div>

PS: Я действительно не пробовал это, но долженвероятно, работа.

Answer 2

Попробуйте использовать оператор flatMap для вложенных подписок.

ngOnInit() {
    this.currentYear = (new Date).getFullYear();
    this.statesubscription = this.regionService.getRegion(contentRequest).flatMap(region => this.contentServiceFunc(region)).subscribe()
}

private contentServiceFunc(region) {
    return this.contentServerStore.pipe(select(getContentServerState))
        .subscribe(val => {
            if (!this.checkValuesService.isNullOrUndefined(val) &&
                val.region.toUpperCase() == Constants.region.us
            ) {
                let contentRequest = new ContentRequest();

                if (!this.checkValuesService.isNullOrUndefined(region)) {
                    this.regionContent = < string > this.domSanitizer.bypassSecurityTrustHtml(region[Constants.regionKey]);
                }
            }

        });
}