Question

以下两个可观察映射之间有什么区别？

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

我有一个带有getter和构造函数的组件。两者都从应用程序的ngrx商店中读取信息并提取字符串（name）。

getter和构造函数之间的唯一区别： getter在HTML中使用，它返回的observable通过async管道发送，而构造函数中的observable映射使用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，则在整个测试期间只会调用一次生命周期挂钩。如果我将订阅从构造函数移动到ngOnInit生命周期钩子，它不会比在构造函数中更好地工作。完全相同（意外）的行为。这同样适用于ngAfterViewInit和其他生命周期钩子。

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

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

[更新] 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

console.log中do s打印的输出示例内容：

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

好像subscribe订阅在第一次调用后丢失了。但为什么呢？

Answer 1

你永远不应该使用这样的吸气剂。不从getter返回Observable。

每次发生 change detection cycle 时，Angular都会一次又一次取消订阅/订阅（这种情况会发生很多）。

现在我要写＆＃34; CD＆＃34; for＆＃34;更改检测＆＃34;

简单演示：

选择一个非常简单的组件：

// 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
  }
}

您将在控制台中看到getting a new value，并且每次单击按钮＆＃34;点击以触发更改检测＆＃34;，其中已注册(click)个事件，它会触发一个新的CD周期。

而且，只要您点击该按钮，您就会看到您获得两次getting a new value。（两次是因为我们没有处于生产模式，Angular执行2个CD周期以确保变量在第一次和第二次更改检测之间没有变化，这可能会导致问题，但这是另一个故事）

可观察的意思是可以长时间保持打开状态，您应该利用它。为了重构前面的代码以保持订阅打开并避免再次取消订阅/订阅，我们可以摆脱getter并声明一个公共变量（可由模板访问）：

// 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
  }
}

现在，无论您点击按钮多少次，您都会看到一个且只有一个getting a new value（直到observable发出一个新的值），但更改检测将< strong>不触发新订阅。

这是 Stackblitz 的现场演示，所以你可以玩，看看console.log发生了=） https://stackblitz.com/edit/angular-e42ilu

修改 getter是一个函数，因此，Angular必须在每张CD上调用它来检查是否有来自它的新值应该在视图中更新。这需要花费很多，但这是原则和魔法＃34;的框架。这也是为什么你应该避免在可能在每张CD上触发的功能中运行密集CPU任务的原因。如果它是纯函数（相同的输入相同的输出并且没有副作用），请使用管道，因为它们被认为是＆＃34;纯粹的＆＃34;默认情况下，缓存结果。对于相同的参数，它们只在管道中运行一次函数，缓存结果，然后立即返回结果而不再运行该函数。

Answer 2

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

如果您希望在initialName更改时触发Observable，那么我建议将initialName转换为RXJS Subject并使用combineLatest：

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', _.name)
        return _.name
      })
      .subscribe(_ => console.log('B!', _))
  })
}

RxJS Observable：订阅丢失了吗？

2 个答案: