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 事件对象的实现
Jul 13 Javascript
JavaScript 三种创建对象的方法
Oct 16 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
js格式化时间小结
Nov 03 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
解决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字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
非常实用的php验证码类
2016/05/15 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
python删除特定文件的方法
2015/07/30 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
露营世界:Camping World
2017/02/02 全球购物
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
销售心得体会
2014/01/02 职场文书
见习期自我鉴定
2014/01/31 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
母校寄语大全
2014/04/10 职场文书
球队口号
2014/06/18 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
2014年保洁工作总结
2014/11/24 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP