ngrxLet:异步管道的更好版本
在第10版中，NgRx发布了一个名为@ngrx /组件。这个包包含帮助程序，以促进组件级别的响应式编码实践。
如果你以前听说过NgRx，它很可能是Angular的一个类似redux的状态管理解决方案@ngrx /存储。事实上，NgRx代表Reactive eXA的张力ngUlar，这不仅仅是国家管理。
这篇文章将介绍@ngrx/component的一个新特性:thengrxLet指令。
异步管道
如果你熟悉Angular中的异步管道，你可以跳过本节。
async管道的主要目的是允许我们自动订阅Observable，从该Observable中获取数据，然后自动取消订阅该Observable。所有这些都在6个字符内:
|异步”>
在上面的例子中，数据源input从一个名为filteredEntries美元。我们的代码不会“手动”订阅那个Observable。相反，异步管道会完成所有事情。
Angular给我们的另一个很酷的特性是，当async管道与结构指令一起使用时，比如* ngIf或* ngFor，我们可以使用Angular模板微语法，将从Observable接收到的数据赋值给一个本地模板变量:
< div * ngIf = " myData $| async as data" >
{{data.name}}
< / div >
异步管道的缺点
这个语法很棒，但是它需要* ngIf或* ngFor，我们并不总是想要或在每一种情况下都需要。另外，新变量的作用域是定义它的元素，这可能有点太严格了。
![今天就通过Angular认证考试]()
因此，经验丰富的Angular开发人员习惯于这样的变通方法:
< ng-container * ngIf = " myData美元| async as data" >
< div >{{data.name}}< / div >
< ul >
data.items" >
{{item.name}}
李< / >
< / ul >
< / ng-container >
上面的解决方案允许我们在对DOM影响较小的情况下扩展局部变量的作用域，但它仍然不能100%令人满意，因为该解决方案仍然依赖于使用* ngIf。
另一个问题是* ngIf也会干扰渲染。如果Observable返回的值是假的，HTML元素将不会被显示。
最后，异步管道不会告诉我们是否发生了错误或Observable何时完成。
进入ngrxLet
ngrxLet解决了上述所有缺点，同时很好地发挥与新的常春藤渲染引擎。
下面是如何使用ngrxLet:
< div* ngrxLet = " myData美元作为数据" >
{{data.name}}
< / div >
另一种可能的语法是:
< div* ngrxLet = " myData美元;让数据" >
{{data.name}}
< / div >
如果我们需要访问Observable的错误或完成状态，我们会这样做:
< div* ngrxLet = " myData美元;让数据;让错误= $错误;Let done = $complete" >
我们可以利用错误和完成状态如下:
< ng-container * ngrxLet = "美元数据源;让数据;让错误= $错误;让完成= $完整”>< div >
{{数据}}
< / div >< span style="color: red"* ngIf = "错误">
错误发生:{{错误}}
< / div >< span style="color: green"* ngIf =“完成”>
数据源完成了发射
< / div >< / ng-container >
![今天就通过Angular认证考试]()
要获得该代码的完整示例，您可以查看下面的Stackblitzhttps://stackblitz.com/edit/ngrx-component?file=src%2Fapp%2Fapp.component.ts
ngrxLet包含的特性有:
- 绑定总是存在的，这对布尔值或空值很有效李< / >
- 的多重用途
异步管李< / > - 提供统一/结构化的处理方式
零和未定义的
- 如果以不同方式触发更改检测
zone.js是否在场(ChangeDetectorRef.detectChanges或ChangeDetectorRef.markForCheck）李< / > - 如果ViewEngine或Ivy存在，则以不同方式触发更改检测(
ChangeDetectorRef.detectChanges或ɵdetectChanges）李< / > - 在一行中区分相同的值(distinctUntilChanged操作符)李< / >< / ul >
如何获得ngrxLet?
第一步是用npm安装这个依赖:
NPM install @ngrx/component——save
然后加入ReactiveComponentModule作为AppModule的依赖项:
import {ReactiveComponentModule} from '@ngrx/component';@NgModule ({
进口:[
BrowserModule、…ReactiveComponentModule
]，
…
}）
导出类AppModule {}
然后，该指令可用于任何组件。
我叫betway必威滚球。我是谷歌的Angular开发专家，也是在角训练在那里我帮助开发团队学习并熟练使用Angular。
需要Angular的帮助吗?保持联系。
如果你喜欢这篇文章，请鼓掌或分享。你的帮助我永远感激。
