OnInit 和 async-pipe 之间的时序问题

Question

async-pipe 与 Observable 的组合存在问题，它在 OnInit 中获得了第一个值。必须是关于OnInit 发生的时间点以及模板被渲染并因此Observable 被订阅的时间点的时间问题。

考虑这个组件：

export class AppComponent implements OnInit {

    subjectA$: Subject<{name:string}>;
    subjectB$: Subject<{name:string}>;

    constructor(
        protected http: HttpClient
    ) {
    }

    ngOnInit() {
        this.subjectA$ = new Subject<{name: string}>();
        this.subjectA$.next({name: "A"});

        this.subjectB$ = new Subject<{name: string}>();
        setTimeout(() => {
          this.subjectB$.next({name: "B"});
        }, 0);
    }

}

和模板：

<p *ngIf='subjectA$ | async as subjectA; else: nosubjectA'>
  subjectA: {{subjectA.name}}
</p>

<ng-template #nosubjectA>
  <p>no subjectA</p>
</ng-template>

<p *ngIf='subjectB$ | async as subjectB; else: nosubjectB'>
  subjectB: {{subjectB.name}}
</p>

<ng-template #nosubjectB>
  <p>no subjectB</p>
</ng-template>

这会导致

no subjectA

subjectB: B 

这意味着：即使subjectA$ 在onInit 中获得了值，视图也不会更新。如果我在setTimeout 中创建第一个值，正如您在subjectB$ 中看到的那样，它可以工作并且我看到了值。虽然这是一个解决方案，但我想知道为什么会发生这种情况，是否有更好的解决方案？

我已经找到的一个解决方案是使用 BehaviorSubject 代替提供第一个值作为初始值：

        this.subjectC$ = new BehaviorSubject<{name: string}>({name: "C"});

使用类似的主题C模板导致subjectC: C。

Try all on StackBlitz.

我真正可观察到的根本不是Subject，而是combineLatest-调用不同东西的结果，其中只有一个是（不幸的是，因为它使用来自@Input()-annotation 的值) 一个Subject，并在OnInit 中使用next 手动推送，如示例中所示。其余的来自http 等人。很可能我可以将组合结果包装在 BehaviourSubject 中，但它对我来说看起来既丑陋又危险，所以它比 setTimeout 方法更糟糕。但我敢打赌，有人可以帮助我并找到一个真正有用的解决方案。 此外，我更愿意避免使用BehaviorSubject，以防止开发人员被诱惑使用getValue。

See on Stackblitz

Answer 1

快速解决方法是将ReplaySubject 与缓冲区1 一起使用，而不是BehaviorSubject。您不必提供默认值，它既没有getValue() 函数也没有value getter。然而，它会缓冲（或保存）最后一个发出的值，并在新订阅时立即发出。

试试下面的

ngOnInit() {
  this.subjectA$ = new ReplaySubject<{name: string}>(1);
  this.subjectA$.next({name: "A"});

  this.subjectB$ = new ReplaySubject<{name: string}>(1);
  this.subjectB$.next({name: "B"});

  this.subjectC$ = combineLatest([this.subjectA$, this.subjectB$]).pipe(
    map((things: [{name:string}, {name:string}]): {name:string} => {
      return {name: things.map(thing => thing.name).join('|')}
    })
  );
}

我修改了你的Stackblitz。

Answer 2

在我发表评论后，我真的忍不住想一定有更好的方法——终于想到了一些可行的方法！

我刚刚修改了你的堆栈闪电战。

private valueA = "A";
private valueB = "B";

subjectA$ = of({ name: this.valueA });
subjectB$ = of({ name: this.valueB });
subjectC$ = combineLatest([this.subjectA$, this.subjectB$])
          .pipe(
            map((things: [{name:string}, {name:string}]): {name:string} => {return {name: things.map(x => x.name).join('|')}})
          );

这样，我们甚至可以丢弃 ngOnInit 钩子，一切正常！