在Resolver里面获取数据,一般可以像下面这样写
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> { return this.store.pipe( select(selectXXX), tap((data) => { if (!data) { // 自行根据实际做判断 // Dispatch action to load data. this.store.dispatch(new GetDataAction()); } }), filter((data) => { return !!data; // 自行根据实际做判断 }), first() ); }
这样写,在resolver执行时,先调用selector,然后在tap里面去做判断,没数据就去触发effect请求数据,然后filter执行,因为没有数据,所以返回false,first方法得不到数据,因此resolver返回的Observable就不会被完成,下一个component不会被加载。这里filter的返回值很重要,如果是true,那么first就会使Observable完成,直接加载下一个component。
当数据请求完毕,用reducer存入store时,只有数据确实发生了变化,resolver这里的pipe中的方法才会再次执行。tap就可以获取数据,不再调用effect请求数据,并且filter返回true,first可以取得数据(数据的值不重要),然后返回数据中的第一个,使resolver的Observable完成,加载下一个component。
这里需要注意的地方是,当effect调用service请求数据失败,要如何做异常处理,防止store中的数据被修改,让tap再次调用effect请求数据。处理不当,会导致UI不停发送给请求,知道取到数据为止。
相关推荐
NGRX和Angular的Reactive Forms绑定
Angular 10,NgRx和Angular Material Starter 通过 表中的内容 (获取有关最新版本的通知,在Twitter上 ) 入门 git clone https://github.com/tomastrajan/angular-ngrx-material-starter.git new-project cd new...
NGRX和Angular的ngrx-entity-relationship示例和指南 可在或上与一起玩的实时示例。
使用Redux,RxJs和NgRx构建Angular应用程序 这是发布的用于的代码存储库。 它包含从头到尾完成本书所必需的所有支持项目文件。 关于这本书 本书首先回顾性地介绍了我们在AngularJS中构建应用程序的方式。 我们还将...
"Reactive Programming with Angular and ngrx: Learn to Harness the Power of Reactive Programming with RxJS and ngrx Extensions" English | ISBN: 1484226194 | 2017 | 148 pages | PDF | 3 MB Manage your ...
Angular-angular-ngrx-nx-realworld-example-app.zip,示例性真实世界应用程序,由angular 8、ngrx 8、nrwl/nx 8angular、ngrx/平台、nrwl/nx代码库构建,包含遵循真实世界规范和api的真实世界示例(crud、auth、高级...
使用ngrx库和rxjs库在angular中进行响应式编程。 Reactive Programming Angular ngrx rxjs
Angular-ngrx-GettingStarted NgRx课程的材料。 APM-Demo0 :本课程的入门文件。 使用此代码与课程一起编码。 APM-Demo1 :首次查看NgRx模块后的已完成文件。 它展示了一个非常简单的NgRx示例。 APM-Demo2 :...
Angular-angular-ngrx-data.zip,与NGRx的角度和实验NGRx数据帮助常规NGRx数据,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员...
Angular-angular-ngrx-chuck-norris.zip,查克诺里斯笑话发生器w/ngrx存储角度ngrx查克诺里斯笑话发生器,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的...
Architecting Angular Applications with Redux, RxJS, and NgRx_Code 源码 本资源转载自网络,如有侵权,请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书
一个完整的Angular入门项目 :smiling_face_with_heart-eyes:表中的内容入门git clone https://github.com/truonghungit/angular-starter.git new-projectcd new-projectyarnyarn start开发服务器润yarn start或ng ...
store-log-monitor, @ngrx/store devtools和 Angular的日志监视器 @ngrx/store-log-monitor 用于 Angular 2和 @ngrx/store-devtools的 redux-devtools-log-monitor端口设置从 npm 安装 @ngrx/store-log
角度该项目是使用版本11.2.2生成的。开发服务器为开发服务器运行ng serve 。... 如果您更改任何源文件,该应用程序将自动重新加载。...进一步的帮助要获得有关Angular CLI的更多帮助,请使用ng help或查看“ 页面。
AngularNgrxStateManagement 该项目是使用版本8.0.2生成的。 开发服务器 为开发服务器运行ng serve 。... 如果您更改任何源文件,该应用程序将自动重新加载。...要获得有关Angular CLI的更多帮助,请使用ng
2、ngrx是借鉴redux的思维,专门为angular中定制的一个状态管理的包,类似react中的redux、vue中的vuex,主要包括以下几个模块(本文先介绍@ngrx/store) @ngrx/store @ngrx/store-devtools @ngrx/effects @ngrx/...
使用angular的过程中有时会出现数据已经更新了,但是对于的视图没有更新,针对这一情况,可以是用angular提供的方法强制更新视图。 这里使用NGZone来更新视图 import {NgZone} from '@angular/core'; constructor...
Angular-angular-ngrx-course.zip,角度NGRX课程-包括存储、效果、实体、路由器存储、示意图此课程现已存档,并已被NGRX(用NGRX数据)取代-完整指南,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的...
Angular Ngrx数据 现在,此存储库与@ngrx合并到@ ngrx / data中。 您可以在找到并在找到包含的 请阅读上面的说明 零Ngrx样板 您可能永远不会再编写动作,缩减器,选择器,效果或HTTP数据服务。 遵循模式,以“React...