angular

Question

我的期望是，当我像这样设置一个可观察对象时，任何绑定都将使用 switchMap 调用的结果：

this.thing = this.route.paramMap.pipe(
        switchMap(async (params: ParamMap) => {
            const id = +params.get('id');
            const data = await this.thingService.getThingDetails(id);
            return new ThingDisplay(data);
        })
    )

但是，如果我有多个 {{ (thing | async)?.prop }} 形式的绑定，我会看到服务方法被调用 每个绑定 。

这意味着每次 | async 使用都在创建对 this.thing Observable 的独立订阅。

我怎样才能避免这种情况？我看到 angular 模板，我可以在其中使用 let-* 语法指定一些上下文....但我想知道是否有比指定专用于此的整个模板更直接的方法... . 上次我使用 MVVM 是 knockoutjs 所以肯定有一个上下文绑定你可以使用.... angular 中有类似的东西吗？我没有找到任何东西，所以任何建议将不胜感激。

我主要是想知道

我应该绑定到组件中的 Observable 吗？
我应该使用我的 Observable 订阅来设置实例变量吗？我觉得很奇怪...
为什么 | async 导致 Observable 每次触发？
我在哪里可以找到与此相关的合理的好文档？ angular 文档中似乎涵盖了一些内容，而 rxjs 文档中涵盖了一些内容......存在的每个版本的 angular 的博客文章可能已经过时（使用我可以使用的方法找不到 getValue)... 任何东西 在 angular 中是否有明确的来源（至少在可观察量方面）？

Answer 1

这里发生了几件事。首先 Observables 是多播的。这意味着对于每个订阅者，switchMap 中的函数都会被调用。

有几个可能的解决方案。一种是订阅 this.thing 并在模板中使用值的不可观察版本。这样做你摆脱了你的异步管道，并且需要在组件被销毁时清理你的可观察对象。或者，您可以将 observable 变成一个 Subject（Subjects 是单播的）并且仍然在您的模板中使用异步管道。

angular - 绑定触发 observable

angular - bindings fire off observable

angular-ui-router

rxjs