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 相关文章推荐
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
vue实现路由切换改变title功能
May 28 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
vant时间控件使用方法详解
Dec 24 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文件上传表单摘自drupal的代码
2011/02/15 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
C#笔试题
2015/07/14 面试题
公司活动策划方案
2014/01/13 职场文书
学习决心书
2014/03/11 职场文书
通用自荐信范文
2014/03/14 职场文书
出售房屋协议书范本
2014/10/06 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
浅谈Python项目的服务器部署
2021/04/25 Python
python flask开发的简单基金查询工具
2021/06/02 Python
详解python的异常捕获
2022/03/03 Python
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python