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 精粹笔记
May 09 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
使用jQuery实现掷骰子游戏
Oct 24 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中使用xmlreader读取xml数据示例
2014/12/29 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Python正则捕获操作示例
2017/08/19 Python
详解supervisor使用教程
2017/11/21 Python
详解python中的index函数用法
2019/08/06 Python
python处理RSTP视频流过程解析
2020/01/11 Python
Python输出指定字符串的方法
2020/02/06 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
木工主管岗位职责
2013/12/08 职场文书
小学生成长感言
2014/01/30 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
财务工作失职检讨书
2014/11/21 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
2014年应急工作总结
2014/12/11 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
Nginx利用Logrotate实现日志分割
2022/05/20 Servers