使用异步管道解决 Angular 模板中的自定义 rxjs 主题

Question

我的 Angular 应用中有一个自定义的 BehaviourSubject，它在我的模板中用作 Observable。

当我在主题上调用 next 时，我希望模板中的主题得到解决。我使用async 管道来监听这个主题的异步变化。

我在 Stackblitz 中创建了一个示例来显示我遇到的问题：https://stackblitz.com/edit/angular-kmou5e

在app.component.ts 中，我创建了一个示例异步方法，它在超时后将值设置为this.data。只要设置了this.data，hello.component.ts 就会被初始化并呈现。我在HelloComponent 中收听OnChanges 并在HelloComponent 中的自定义主题上调用next()。

正如您在HelloComponent 的模板中看到的，我希望观察到的主题customSubject$ 在通过next() 获得值后立即呈现为<h1>。

您可以看到，customSubject$ 的订阅被调用，如日志所示。只有模板不会呈现这个 Observable/Subject。

使用自定义Subject 时如何让模板呈现？我需要使用不同的管道吗？

仅供参考：我还尝试使用 combineLatest 将 Subject 的值分配给新的 Observable，但效果不佳。

Answer 1

这是一个时间问题。只需将您的主题更改为行为主题（缓存最后发出的值），您的模板就会显示最新发出的值。

这里有一个good resource，关于各种类型的主题。

Answer 2

非常好的问题。问题在于lifecycle hooks 的顺序不保存值，如果运气不好，它只是向订阅者多播。现在生命周期按此顺序运行。构造函数，ngOnChanges，OnNgInit .....然后它加载视图和子组件。因此，为了让您看到这个值，您需要使用 BehaviorSubject 对其进行缓冲。

看看我在说什么

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { combineLatest, Observable, Subject } from 'rxjs';

@Component({
  selector: 'hello',
  template: `<h1>{{ customSubject$ | async }}</h1>
             <h2>{{test}}</h2>
  `
})
export class HelloComponent implements OnChanges  {
  @Input() name: string;
public customSubject$: Subject<string>;

    public test ='Before ngOnChanges run';

  constructor() {
      console.log('constructed');

    this.customSubject$ = new Subject();
    this.customSubject$.subscribe(s => {
      console.log('customSubject$ subscription resolved with ' + s);
    });
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.hasOwnProperty('name')) {
      console.log('ngOnChanges is called with ' + this.name);
      this.customSubject$.next(this.name);

    }
          this.test ='After ngOnChanges Ran';
  }
}

你有一个测试变量，它的值在 ngOnChanges 中改变了。您永远不会看到“在 ngOnChanges 运行之前”的值，因为视图尚未初始化。

现在您的*ngIf='data' 让您更加困惑，因为在 ngIf 解析为 true 之前未构造组件

这有助于增加你看到这个的延迟

  ngOnInit() {
    setTimeout(() => {
      this.data = 'some string';
    }, 5000);
  }