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 相关文章推荐
ExtJS的拖拽效果示例
Dec 09 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
three.js着色器材质的内置变量示例详解
Aug 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
一些星际专用术语解释
2020/03/04 星际争霸
也谈php网站在线人数统计
2008/04/09 PHP
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
php 购物车完整实现代码
2014/06/05 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
使用PHP开发留言板功能
2019/11/19 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
python计算N天之后日期的方法
2015/03/31 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
python的依赖管理的实现
2019/05/14 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
python多线程http压力测试脚本
2019/06/25 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
如何在pycharm中安装第三方包
2020/10/27 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
教师网络培训感言
2014/03/09 职场文书
企业计划生育责任书
2015/05/09 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL