angular - RxJS 可观察到的 : Subscription lost?

Question

下面两个可观察映射有什么区别？

(如果你觉得下面的代码有些奇怪:它源于一个边做边学的爱好项目；我还在学习 RxJS)

我有一个带有 getter 和构造函数的组件。两者都从应用的 ngrx 存储中读取信息并提取字符串 (name)。

getter 和构造函数之间的唯一区别:getter 在 HTML 中使用，它返回的可观察对象通过 async 管道发送，而可观察映射在构造函数中通过使用 subscribe 的订阅完成。我希望当 name 的新值可用时，它们都会触发。

但是只有 getter 以这种方式工作，并在 HTML 中提供 async 管道，它与名称的新值一起使用 (console.log('A') 每次更改名称时都会调用)。 subscribe 订阅的回调只被调用一次:console.log('B') 和 console.log('B!') 都是只调用一次，再也不会调用。

如何解释这种行为差异？

我的组件的片段:

// getter works exactly as expected:
get name$(): Observable<string> {
  console.log('getter called')
  return this.store
    .select(this.tableName, 'columns')
    .do(_ => console.log('DO (A)', _))
    .filter(_ => !!_)
    .map(_ => _.find(_ => _.name === this.initialName))
    .filter(_ => !!_)
    .map(_ => {
      console.log('A', _.name)
      return _.name
    })
}

// code in constructor seems to lose the subscription after the subscription's first call:
constructor(
  @Inject(TablesStoreInjectionToken) readonly store: Store<TablesState>
) {
  setTimeout(() => {
    this.store
      .select(this.tableName, 'columns')
      .do(_ => console.log('DO (B)', _))
      .filter(_ => !!_)
      .map(_ => _.find(_ => _.name === this.initialName))
      .filter(_ => !!_)
      .map(_ => {
        console.log('B', _.name)
        return _.name
      })
      .subscribe(_ => console.log('B!', _))
  })
}

附加信息:如果我添加 ngOnInit，这个生命周期钩子(Hook)在整个测试期间只被调用一次。如果我将订阅从构造函数移至 ngOnInit 生命周期 Hook ，它并没有比在构造函数中更好地工作。完全相同的(意外的)行为。这同样适用于 ngAfterViewInit 和进一步的生命周期 Hook 。

名称更改的输出 'some-name' -> 'some-other-name' -> 'some-third-name' -> 'some-fourth-name' -> 'some-fifth-姓名':

[更新] 根据 Pace 在他们评论中的建议，我添加了 getter 调用日志

[UPDATE] do 按照 Pace 的建议添加

getter called
DO (A) (3) [{…}, {…}, {…}]
A some-name
DO (B) (3) [{…}, {…}, {…}]
B some-name
B! some-name
getter called
DO (A) (3) [{…}, {…}, {…}]
A some-other-name
getter called
DO (A) (3) [{…}, {…}, {…}]
A some-third-name
getter called
DO (A) (3) [{…}, {…}, {…}]
A some-fourth-name
getter called
DO (A) (3) [{…}, {…}, {…}]
A some-fifth-name

do 中的 console.log 输出的示例内容:

[
  {
    "name": "some-name"
  },
  {
    "name": "some-other-name"
  },
  {
    "name": "some-third-name"
  }
]

似乎 subscribe 订阅在第一次调用后就丢失了。但是为什么？

Answer 1

你永远不应该使用那样的 setter/getter 。不要不从 getter 返回 Observable。

Angular 会一次又一次地退订/订阅，每次 change detection cycle 发生(经常发生)。

现在我将为“变化检测”写“CD”

简单的演示:

拿一个非常简单的组件:

// only here to mock a part of the store
const _obsSubject$ = new BehaviorSubject('name 1');

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  get obs$() {
    return _obsSubject$
      .asObservable()
      .pipe(tap(x => console.log('getting a new value')));
  }

  randomFunction() {
    // we don't care about that, it's just
    // to trigger CD from the HTML template
  }
}

您会在控制台中看到获取新值，并且每次单击按钮“Click to trigger change detection”时，它都有一个(click) 事件注册，它会触发一个新的 CD 周期。

而且，只要您点击该按钮多次，您就会看到两次获得一个新值。(两次是因为我们不在生产模式下，Angular 执行 2 个 CD 周期以确保变量在第一次和第二次变化检测之间没有变化，这可能会导致问题，但那是另一回事了)。

observable 的要点是它可以长时间保持打开状态，您应该利用这一点。为了重构之前的代码以保持订阅打开并避免再次取消订阅/订阅，我们可以去掉 getter 并声明一个公共(public)变量(可由模板访问):

// only here to mock a part of the store
const _obsSubject$ = new BehaviorSubject('name 1');

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  obs$ = _obsSubject$
    .asObservable()
    .pipe(tap(x => console.log('getting a new value')));

  randomFunction() {
    // we don't care about that, it's just
    // to trigger CD from the HTML template
  }
}

现在，无论您点击按钮多少次，您都只会看到一个获取新值(当然要等到 observable 发出一个新值)，但是更改检测将不会触发新订阅。

这是 Stackblitz 上的现场演示，因此您可以尝试并查看 console.log 发生的情况 =) https://stackblitz.com/edit/angular-e42ilu

编辑:getter 是一个函数，因此，Angular 必须在每张 CD 上调用它，以检查是否有来自它的新值应该在 View 中更新。这成本很高，但这是框架的原理和“神奇”之处。这也是为什么您应该避免在可能在每张 CD 上触发的函数中运行密集型 CPU 任务。如果它是一个纯函数(相同的输入相同的输出并且没有副作用)，请使用管道，因为默认情况下它们被认为是“纯”的并缓存结果。对于相同的参数，他们只会在管道中运行函数一次，缓存结果，然后立即返回结果，而无需再次运行函数。