Angular resolve基础用法详解

简介

为什么使用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守卫>

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

(0)

相关推荐

  • 详解AngularJs路由之Ui-router-resolve(预加载)

    ng-route模块中的when()和ui-route的state()都提供了resolve属性. 为什么需要使用resolve? 当路由切换的时候,被路由的页面中的元素(标签)就会立马显示出来,同时,数据会被准备好并呈现出来.但是注意,数据和元素并不是同步的,在没有任何设置的情况下,AngularJS默认先呈现出元素,而后再呈现出数据.这样就会导致页面会被渲染两遍,导致"页面UI抖动"的问题,对用户不太友好.resolve的出现解决了这个问题. resolve是干嘛用的 resolv

  • 详解AngularJS 路由 resolve用法

    ng-route模块中的when()和ui-route的state()都提供了resolve属性. 为什么需要使用resolve? 当路由切换的时候,被路由的页面中的元素(标签)就会立马显示出来,同时,数据会被准备好并呈现出来.但是注意,数据和元素并不是同步的,在没有任何设置的情况下,AngularJS默认先呈现出元素,而后再呈现出数据.这样就会导致页面会被渲染两遍,导致"页面UI抖动"的问题,对用户不太友好.resolve的出现解决了这个问题. resolve是干嘛用的 resolv

  • Angular2使用Guard和Resolve进行验证和权限控制

    我们在开发web应用时,在服务器端都会控制某种或某个用户是否有权限调用某个接口.在前端,我们除了根据用户的角色或其他特性来控制一些页面元素是否显示以外,也需要控制用户是否能够进入某些页面(例如通过直接输入URL的方式直接进入).要控制是否显示,我们可以使用 *ngIf . [hidden] 等方式.而对于控制用户能否进入某个页面,Angular2的路由框架也提供了非常方便的方式来实现这个功能. Angular2提供了2种组件, Guard 和 Resolve . Guard 顾名思义就是用来保护

  • angular route中使用resolve在uglify压缩后问题解决

    问题 如下代码所示, 如果在angular中配置route的resolve时, 没有指定'PicLoader', 则在压缩模式下(uglify), angular执行报错. 通过如下方式可以解决: 解决 $routeProvider .when("/pic", { controller: "ImageViewerCtrl", templateUrl: "image.html", resolve: { images: ['PicLoader', f

  • Angular resolve基础用法详解

    简介 为什么使用resolve: 当路由切换的时候,被路由的页面中的元素(标签)就会立马显示出来,同时,数据会被准备好并呈现出来.但是注意,数据和元素并不是同步的,在没有任何设置的情况下,AngularJS默认先呈现出元素,而后再呈现出数据.这样就会导致页面会被渲染两遍,导致"页面UI抖动"的问题,对用户不太友好.resolve的出现解决了这个问题. resolve是干嘛用的: resolve属性里的值会在路由成功前被预先设定好,然后注入到控制器中.通俗地将,就是等数据都"就

  • vuex state及mapState的基础用法详解

    先使用vue cli构建一个自己的vue项目 1.npm i -g vue-cli 2.vue init webpack sell (sell是你的项目名) 3.一路回车(在这个过程中会提示你是否安装一些依赖包,比如vue-router,es6语法检查等等,这些根据你个人习惯或者癖好选择Y/N) 4.npm i (这个是安装项目的依赖包) 5.npm run dev(启动你的vue项目) 这个时候如果在页面上看到了vue的logo说明你的vue的项目基础构建已经完成,然后你可以删除掉没有用的组件

  • angular *Ngif else用法详解

    Angular 中常用的指令有用来遍历的 *ngFor .控制元素显示隐藏的 *ngIf,今天学习一下 *ngIf 这个常用的指令. NgIf 指令 ngIf 指令用于根据表达式的值,在指定位置渲染then 或 else 模板的内容. then 模板除非绑定到不同的值,否则默认是 ngIf 指- 令关联的内联模板. else 模板除非绑定对应的值,否则默认是 null. 简单形式 <div *ngIf="condition">...</div> <!--A

  • Python写脚本常用模块OS基础用法详解

    收集了一些关于OS库的用法,整理归纳一下,方便使用 import os # 系统操作 print(os.sep) # 获取当前系统的路径分隔符 print(os.name) # 获取当前使用的工作平台 print(os.getenv('PATH')) # 获取名为 PATH 的环境变量 print(os.getcwd()) # 获取当前的路径 print(os.environ['PATH']) # 可以返回环境相关的信息 不传参时,以字典的方式返回所有环境变量 # 调用系统命令 os.syste

  • Android SurfaceView基础用法详解

    Android 游戏开发框架核心组件 核心组件介绍 SurfaceView 介绍 SurfaceView 介绍 SurfaceView 就是带 Surface 的 view,它是一个 View,是 View 的子类,所以和其他 View 一样,可以在屏幕上展示东西接收用户输入,具有 View 的生命周期回调函数,如 onMeasure.onLayout.onDraw.onTouchEvent 等 SurfaceView 带有独立的 Surface(独立与 window 的 surface),这可

  • Java BigDecimal基础用法详解

    目录 一.BigDecimal概述 二.BigDecimal常用构造函数 2.1.常用构造函数 2.2.使用问题分析 三.BigDecimal常用方法详解 3.1.常用方法 3.2.BigDecimal大小比较 四.BigDecimal格式化 五.BigDecimal常见异常 5.1.除法的时候出现异常 六.BigDecimal总结 6.1.总结 6.2.工具类推荐 一.BigDecimal概述 一般情况下,对于那些不需要准确计算精度的数字,我们可以直接使用Float和Double处理,但是Do

  • Django中间件基础用法详解

    前言 django的中间件可以在视图函数执行前执行,比如登陆验证.日志记录等,下面简单说明一下中间件的基础用法,主要为笔者学习时的笔记 1. 在django项目文件夹下创建一个用于存放中间件函数的文件夹 文件夹的名字可自定义,本文使用utils作为文件夹名 2. 在utils文件夹中创建中间件py文件 如用于登陆验证的中间件loginCheck.py from django.http import HttpResponseRedirect from django.utils.deprecatio

  • C++学习进阶之Makefile基础用法详解

    目录 1. Makefile基本语法与执行 2. Makefile简化过程 3. Makefile生成并使用库 3.1 动态库的建立与使用 3.2 动态加载库的建立与使用 总结 1. Makefile基本语法与执行 为什么要使用 Makefile? Makefile 文件描述了整个工程的编译.链接的规则. 为工程编写 Makefile 的好处是能够使用一行命令来完成"自动化编译".只需提供一个(通常对于一个工程来说会是多个)正确的 Makefile,接下来每次的编译都只需要在终端输入&

  • python链表的基础概念和基础用法详解

    本文为大家分享了python链表的基础概念和基础用法,供大家参考,具体内容如下 一.什么是链表 链表是由多个不同的节点组成,每个节点通过指针区域关联到一起链表的头指针,指向了头节点,通过头指针可以找到其他节点信息 二.什么是节点 链表由节点组成,每个节点又包含两个部分,一个是元素区域,一个是指针区域.元素区域存储的是,当前节点的数值,指针区域指向下一个节点的对象.在C语言中,指针应该是指向下一个元素的的内存地址,因python中不研究指针,这里用下一个节点的对象代替.这样我们就能通过指针区域,找

  • Python for循环及基础用法详解

    Python 中的循环语句有 2 种,分别是 while 循环和 for 循环,前面章节已经对 while 做了详细的讲解,本节给大家介绍 for 循环,它常用于遍历字符串.列表.元组.字典.集合等序列类型,逐个获取序列中的各个元素. for 循环的语法格式如下: for 迭代变量 in 字符串|列表|元组|字典|集合: 代码块 格式中,迭代变量用于存放从序列类型变量中读取出来的元素,所以一般不会在循环中对迭代变量手动赋值:代码块指的是具有相同缩进格式的多行代码(和 while 一样),由于和循

随机推荐