昨天,我们写过如何使用异步
管道自动订阅和取消订阅从我们的观测数据。
当我教授这个话题时,人们通常至少有以下两种反对意见之一:
如果我还需要订阅的数据在我的Typescript代码?
首先,使用异步
pipe似乎只允许您访问HTML模板中的数据。但事实并非如此,因为你仍然可以使用tap操作符来“监视”你的可观察对象,并从中获取数据。例如(完整例子):
这跨度>.的名字$ = nameService.getName()。管(丝锥(<跨度class="hljs-function">的名字跨度>=>跨度><跨度class="hljs-keyword">这跨度>.的名字=的名字));
代码语言:跨度><跨度class="shcb-language__name">打印稿跨度><跨度class="shcb-language__paren">(跨度><跨度class="shcb-language__slug">打印稿跨度><跨度class="shcb-language__paren">)跨度>
然后在HTML模板中:
<<跨度class="hljs-name">p跨度>>跨度>异步管道的名称:{{Name $ | async}}<跨度class="hljs-tag"><跨度class="hljs-name">p跨度>>跨度>
代码语言:跨度><跨度class="shcb-language__name">HTML、XML跨度><跨度class="shcb-language__paren">(跨度><跨度class="shcb-language__slug">xml跨度><跨度class="shcb-language__paren">)跨度>
如果我需要从订阅中的对象中读取多个属性怎么办?
另一种说法是,你不想以这样的方式结束:
<<跨度class="hljs-name">p跨度>>跨度>名字:{{(用户$ | async)?。firstName}}<跨度class="hljs-tag"><跨度class="hljs-name">p跨度>>跨度><跨度class="hljs-tag"><<跨度class="hljs-name">p跨度>>跨度>姓氏:{{(用户$ | async)?。lastName}}<跨度class="hljs-tag"><跨度class="hljs-name">p跨度>>跨度>
代码语言:跨度><跨度class="shcb-language__name">HTML、XML跨度><跨度class="shcb-language__paren">(跨度><跨度class="shcb-language__slug">xml跨度><跨度class="shcb-language__paren">)跨度>
上面的代码很难阅读,每个属性都需要一个订阅。这本身就是一场灾难,因为每个订阅都可能触发来自服务器的相同数据的HTTP请求!
相反,您可以这样做,只使用一个订阅,将结果存储在一个局部变量中,然后在数据可用时呈现数据。此技术适用于任何结构指令,例如* ngIf
或* ngFor
:
<<跨度class="hljs-name">div跨度>*<跨度class="hljs-attr">ngIf跨度>=<跨度class="hljs-string">"user$ | async as user"跨度>>跨度><跨度class="hljs-tag"><<跨度class="hljs-name">p跨度>>跨度>名字:{{用户。firstName}}<跨度class="hljs-tag"><跨度class="hljs-name">p跨度>>跨度><跨度class="hljs-tag"><<跨度class="hljs-name">p跨度>>跨度>姓:{{用户。lastName}}<跨度class="hljs-tag"><跨度class="hljs-name">p跨度>>跨度><跨度class="hljs-tag"><跨度class="hljs-name">div跨度>>跨度>
代码语言:跨度><跨度class="shcb-language__name">HTML、XML跨度><跨度class="shcb-language__paren">(跨度><跨度class="shcb-language__slug">xml跨度><跨度class="shcb-language__paren">)跨度>
如果通过添加元素来适应订阅来更改DOM结构让您感到困扰,那么您可以使用ng-template
相反,尽管这里的语法也可能有点令人不安:
<<跨度class="hljs-name">ng-template跨度>[<跨度class="hljs-attr">ngIf跨度>] =<跨度class="hljs-string">"user$ | async"跨度><跨度class="hljs-attr">让用户跨度>>跨度><跨度class="hljs-tag"><<跨度class="hljs-name">p跨度>>跨度>名字:{{用户。firstName}}<跨度class="hljs-tag"><跨度class="hljs-name">p跨度>>跨度><跨度class="hljs-tag"><<跨度class="hljs-name">p跨度>>跨度>姓:{{用户。lastName}}<跨度class="hljs-tag"><跨度class="hljs-name">p跨度>>跨度><跨度class="hljs-tag"><跨度class="hljs-name">ng-template跨度>>跨度>
代码语言:跨度><跨度class="shcb-language__name">HTML、XML跨度><跨度class="shcb-language__paren">(跨度><跨度class="shcb-language__slug">xml跨度><跨度class="shcb-language__paren">)跨度>
好了,今天就到这里吧。明天,我们将看到我们如何做得比现在更好。