Angular resolve基础用法详解


Posted in Javascript onOctober 03, 2018

简介

为什么使用resolve:

当路由切换的时候,被路由的页面中的元素(标签)就会立马显示出来,同时,数据会被准备好并呈现出来。但是注意,数据和元素并不是同步的,在没有任何设置的情况下,AngularJS默认先呈现出元素,而后再呈现出数据。这样就会导致页面会被渲染两遍,导致“页面UI抖动”的问题,对用户不太友好。resolve的出现解决了这个问题。

resolve是干嘛用的:

resolve属性里的值会在路由成功前被预先设定好,然后注入到控制器中。通俗地将,就是等数据都“就位”后,才进行路由(其实我觉得也不能叫路由,因为路由是一些列的操作,其中就包括了设置resolve属性等等)。这样的好处就是页面仅会被渲染一遍。

这样,我们就可以通过这种方式来动态加载相应的文件,减轻首页加载的负担。

一、使用场景

resolve保证了数据获取后再进行路由跳转,防止因为数据延迟而出现短暂的空组件情况,以此增强用户体验。

应用resolve还可以进行路由拦截,例如某些网站如果用户未登录,在跳转到某一页面时会提示未登录然后强行回跳至前一页面,这时如果使用resolve就可以在跳转发生前判断登录状态以决定是否允许跳转。

二、基础用法

示例中跳转逻辑为 home.component => resolve.service => detail.component

home-routing.module.ts

import { NgModule }    from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DetailResolver }  from './detail-resolver.service';
import { DetailComponent }  from './detail.component';

const routes: Routes = [
 {
 path: ':id',
 component: DetailComponent,
 resolve: { // 此处使用resolve
  detail: DetailResolver
 }
 },
];
@NgModule({
 imports: [
 RouterModule.forChild(routes)
 ],
 exports: [
 RouterModule
 ],
 providers: [
 DetailResolver
 ]
})
export class HomeRoutingModule { }

detail-resolver.service.ts

import { Injectable }    from '@angular/core';
import { Router, Resolve, RouterStateSnapshot,
   ActivatedRouteSnapshot } from '@angular/router';
import { Observable }    from 'rxjs';
import { map, take }    from 'rxjs/operators';

import { detail, DetailService } from './detail.service';

@Injectable()
export class DetailResolver implements Resolve<Detail> {
 constructor(private detailService: DetailService, private router: Router) {}

 resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Detail> {
 let id = route.paramMap.get('id');

 return this.detailService.getDetail(id).pipe(
  take(1), // 可选,只发出源 Observable 最初发出的的1个值
  map(res => {
  if (res) {
   return res;
  } else { // 请求失败时拦截跳转
   this.router.navigate(['/home']);
   return null;
  }
  })
 );
 }
}

由路由器提供的 Observable 必须完成,否则导航不会继续。

detail.component.ts

// 通过 route 获取 detail-resolver.service 中 detailService.getDetail 请求的数据
ngOnInit() {
 this.route.data
 .subscribe((data: { detail: Detail }) => {
  this.detail = data.detail; 
 });
}

参考Angular中文网 <Resolve: 预先获取组件数据>

API地址 <resolve守卫>

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript:void(0)使用探讨
Aug 27 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
解决angularjs service中依赖注入$scope报错的问题
Oct 02 #Javascript
angular.js实现列表orderby排序的方法
Oct 02 #Javascript
Angularjs实现数组随机排序的方法
Oct 02 #Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 #Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 #Javascript
angular ng-model 无法获取值的处理方法
Oct 02 #Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 #Javascript
You might like
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
javascript 写类方式之九
2009/07/05 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
jquery foreach使用示例
2013/09/12 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
Python实现的金山快盘的签到程序
2013/01/17 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
python迭代dict的key和value的方法
2018/07/06 Python
opencv与numpy的图像基本操作
2019/03/08 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
python实现交并比IOU教程
2020/04/16 Python
会计主管岗位职责
2014/01/03 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
经理助理岗位职责
2014/03/05 职场文书
高一新生军训方案
2014/05/12 职场文书
党员个人自我评价
2015/03/03 职场文书
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android