Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angular – RxJS Observable:订阅丢失了吗?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
以下两个可观察映射之间有什么区别?

(如果以下代码中的某些内容对您来说很奇怪:它源于一个边做边学的爱好项目;我仍然学习RxJS)

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

getter和构造函数间的唯一区别:getter在HTML中使用,它返回的observable通过异步管道发送,而构造函数中的observable映射由订阅使用subscribe完成.我希望它们都可以随着名称的新值变得频繁而激活.

但是只有getter以这种方式工作并在HTML中提供异步管道,并在其中使用新的name值(每次更改名称时都会调用console.log(‘a’)).订阅订阅的回调只被调用一次: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,则在整个测试期间只调用一次生命周期挂钩.如果我将订阅从构造函数移动到ngOnInit生命周期钩子,它不会比在构造函数中更好地工作.完全相同(意外)的行为.这同样适用于ngAfterViewInit和其他生命周期钩子.

名称输出更改’some-name’ – > ‘some-other-name’ – > ‘some-third-name’ – > ‘some-fourth-name’ – > “一些,第五名”:

[更新]正如Pace在评论中所建议的,我添加了getter通话记录

[updatE]根据Pace的建议添加了dos

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

dos中console.logs打印的输出示例内容

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

似乎订阅订阅在第一次调用后丢失.但为什么?

从ngrx.SELEct()返回的Observable只会在商店中的数据发生变化时触发.

如果你希望在initialName更改时触发Observable,那么我建议将initialName转换为RXJS主题使用COR_191_11845@bineLatest:

initialNameSubject = new BehaviorSubject<String>('some-name');

constructor(
  @Inject(TablesStoreInjectionToken) readonly store: Store<TablesState>
) {
  setTimeout(() => {
    this.store
      .SELEct(this.tablename,'columns')
      .combineLatest(this.initialNameSubject)
      .map(([items,initialName]) => items.find(_ => _.name === initialName))
      .filter(_ => !!_)
      .map(_ => {
        console.log('B',_))
  })
}

大佬总结

以上是大佬教程为你收集整理的angular – RxJS Observable:订阅丢失了吗?全部内容,希望文章能够帮你解决angular – RxJS Observable:订阅丢失了吗?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。