将可观察对象的一部分作为角度分量的输入时出错？

Question

我对与Observable一起看到的竞赛案例有疑问。这可能更像是一个一般的可观察/角度问题。从一条路线过渡到另一条路线时，我看到来自控制器的cannot read 'property' of undefined error在我们过渡到新路线时正在销毁。在我的控制器中，我有一个像这样的方法：

// 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$选择器返回未定义，并且我的控制器的代码引发错误。奇怪的是，发生控制台错误时（通过控制台日志记录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我不喜欢，因为它不完全是一种优雅的解决方案。

我不太明白为什么两个解决方案都能解决问题。任何人都可以指出为什么存在此问题吗？特别是考虑到组件已被破坏。这感觉像是一个孤立的订阅，但我不知道如何。