Angular - 多个订阅不会得到相同的答案答案

【问题标题】：Angular - multiple subscribe don't get the same answerAngular - 多个订阅不会得到相同的答案
【发布时间】：2020-05-07 14:35:03
【问题描述】：

我有一个小问题，我订阅了 observable 2 次。准时我得到了正确的结果，但是在我第二次订阅时，我总是得到相同的结果。这是我的代码：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Subject, merge, EMPTY, combineLatest, Observable, of } from 'rxjs';
import { scan, map, catchError, tap } from 'rxjs/operators';
import { boatsList } from 'src/app/shared/mocks/boats.mock';
import { CatamaranModel } from 'src/app/shared/models/catamaran.model';
import { SailBoatModel } from 'src/app/shared/models/sail-boat.model';

@Injectable({
  providedIn: 'root'
})

export class BoatListService {

  private boatListInitSubject: BehaviorSubject<(CatamaranModel|SailBoatModel)[]> = new BehaviorSubject(boatsList);
  boatListInit$ = this.boatListInitSubject.asObservable();

  private addedBoatSubject: Subject<(CatamaranModel|SailBoatModel)> = new Subject();
  addedBoat$ = this.addedBoatSubject.asObservable();

  boatList$: Observable<(CatamaranModel|SailBoatModel)[]> = merge(
    this.boatListInit$,
    this.addedBoat$
  )
    .pipe(
      scan((acc: (CatamaranModel|SailBoatModel)[], value: CatamaranModel|SailBoatModel) => [...acc, value]),
    );

  constructor() {
    this.addedBoat$.subscribe(data => console.log('DATA', data));
    this.boatList$.subscribe(data => console.log('DATA AFTER ADD', data));
  }

  addBoat(boat: CatamaranModel | SailBoatModel){
    this.addedBoatSubject.next(boat);
  }
}

在这段代码中，this.boatlist$.subscribe 给了我数组中的 5 个对象，这很好。

addBoat 是这样调用的：

 onSubmit(){
    if (this.addBoatForm.valid){
      this.boatListService.addBoat(
        new CatamaranModel(150, 150, 564, 15, false)
      );
      this.router.navigate(['/']);
      console.log('BATEAU AJOUTE');
    }
  }

但是在这段代码中：

  constructor(
    private boatListService: BoatListService
  ) {
  }

  ngOnInit(): void {
    this.boatListService.boatList$.subscribe((data) => console.log('IN THE ADD COMPONENT', data));
  }

订阅在必要时启动，但始终向我发送旧值（用于初始化的值）。

我不明白为什么我有两个数据用于同一个 observable。

如果有人有想法...

【问题讨论】：

你在什么时候打电话给你的服务addBoat()？
我编辑了我的帖子，他被调用了一次，并且在服务中，数据很好但是在我的组件中，订阅已启动但获取旧数据
您在提交时将路由更改为 Root，这可能会重新初始化您的应用程序并且您的所有更改都将丢失，因此您只会拥有您在 Behavior 主题中初始化的内容（它会重新初始化）跨度>
导航重新初始化很奇怪。我怎样才能避免这种情况？

标签： angular observable rxjs6

【解决方案1】：

这是boatListInitSubject 的预期行为，因为它是BehaviorSubject

Subjects 的变体之一是 BehaviorSubject，它有一个 “当前值”的概念。它存储发出的最新值它的消费者，并且每当有新的观察者订阅时，它将立即从 BehaviorSubject 接收“当前值”。

【讨论】：

是的，我知道，但boatList$ 是可观察的，而不是主题。如果是行为主题，问题应该出在 2 个订阅，但只有一个作为好数据

【解决方案2】：

我的问题终于解决了，

添加后，我重定向到 LazyLoading 中的另一个页面。

我在此页面的模块中遇到问题（不知道具体是什么，因为我删除并重新创建了我的模块文件），每次加载此页面时都会重新启动我的 observable 服务。

【讨论】：