javascript - 将可观察对象的一部分作为输入传递给 Angular 分量时出错？

Question

我有一个关于我在 Observable 中看到的竞赛案例的问题。这可能更像是一个普遍的可观察/Angular 问题。从一条路线转换到另一条路线时，我看到 Controller 出现无法读取未定义的“属性”错误，该 Controller 在我们过渡到新路线时正在销毁。在我的 Controller 中，我有一个像这样的方法:

// this.setting$: Observable<object>;

get name$: Observable<string> {
    return this.settings$.pipe(map(settings => settings.name));
}

上面的函数抛出错误。在同一个组件模板中，我有:

<some-component [name]="name$ | async"></some-component>

当我转换到新页面时，this.settings$ 选择器返回未定义，并且我的 Controller 的代码抛出错误。奇怪的是，当控制台错误发生时，我的组件已经被销毁(通过控制台日志记录 ngOnDestroy 进行测试)。

我找到了两个可以解决我的问题的解决方案。解决方案A:

// Parse the name property in the template - which I think looks ugly
<some-component [name]="(settings$ | async).name"></some-component>

或者，解决方案B:

// Pass entire settings object into component and parse out name in some-component controller - yuck
<some-component [settings]="settings$ | async"></some-component>

我不喜欢这两种解决方案。解决方案 A 我不喜欢，因为它在模板中看起来很笨重 - 但也许我应该处理它。我不喜欢解决方案 B，因为它不完全是一个优雅的解决方案。

我不太明白为什么这两种解决方案都能解决问题。谁能指出为什么会出现这个问题？特别是考虑到该组件已被破坏。这感觉就像是一个孤立的订阅，但我不明白是怎么回事。

编辑:我创建了一个 stackblitz 来重现该问题。 https://stackblitz.com/edit/ngxs-repro-ndaco6 。共有三个路由:/home、/profile、/settings。/profile 和/settings 取决于 url 中的帐户 ID。/home 没有。当您从/profile 路由到/home 时，请注意没有控制台错误。但是，当您从/settings 路由到/home 时，会出现控制台错误。有人可以帮助我理解为什么吗？注意，抛出错误时，抛出错误的SettingsComponent已经被销毁了。

Answer 1

使用

name$ = this.settings$.pipe(map(settings => settings ? settings.name : null));

它会检查设置是否有值并重用相同的 observable，无需在每次访问 getter 时重新创建 observable。