Angular刷新当前页面的实现方法


Posted in Javascript onNovember 21, 2018

onSameUrlNavigation

从angular5.1起提供onSameUrlNavigation来支持路由重新加载。

有两个值'reload'和'ignore'。默认为'ignore'

定义当路由器收到一个导航到当前 URL 的请求时应该怎么做。 默认情况下,路由器将会忽略这次导航。但这样会阻止类似于 "刷新" 按钮的特性。 使用该选项可以配置导航到当前 URL 时的行为。

使用

配置onSameUrlNavigation

@NgModule({
 imports: [RouterModule.forRoot(
  routes,
  { onSameUrlNavigation: 'reload' }
 )],
 exports: [RouterModule]
})

reload实际上不会重新加载路由,只是重新出发挂载在路由器上的事件。

配置runGuardsAndResolvers

runGuardsAndResolvers有三个值:

  • paramsChange: 仅在路由参数更改时触发。如/reports/:id 中id更改
  • paramsOrQueryParamsChange: 当路由参数更改或参训参数更改时触发。如/reports/:id/list?page=23中的id或page属性更改
  • always :始终触发
const routes: Routes = [
 {
  path: '',
  children: [
   { path: 'report-list', component: ReportListComponent },
   { path: 'detail/:id', component: ReportDetailComponent, runGuardsAndResolvers: 'always' },
   { path: '', redirectTo: 'report-list', pathMatch: 'full' }
  ]
 }
];

组件监听router.events

import {Component, OnDestroy, OnInit} from '@angular/core';
import {Observable} from 'rxjs';
import {Report} from '@models/report';
import {ReportService} from '@services/report.service';
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';

@Component({
 selector: 'app-report-detail',
 templateUrl: './report-detail.component.html',
 styleUrls: ['./report-detail.component.scss']
})
export class ReportDetailComponent implements OnInit, OnDestroy {
 report$: Observable<Report>;
 navigationSubscription;

 constructor(
  private reportService: ReportService,
  private router: Router,
  private route: ActivatedRoute
 ) {
  this.navigationSubscription = this.router.events.subscribe((event: any) => {
   if (event instanceof NavigationEnd) {
    this.initLoad(event);
   }
  });
 }

 ngOnInit() {
  const id = +this.route.snapshot.paramMap.get('id');
  this.report$ = this.reportService.getReport(id);
 }

 ngOnDestroy(): void {
  // 销毁navigationSubscription,避免内存泄漏
  if (this.navigationSubscription) {
   this.navigationSubscription.unsubscribe();
  }
 }

 initLoad(e) {
  window.scrollTo(0, 0);
  console.log(e);
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 Javascript
详解ES6系列之私有变量的实现
Nov 21 #Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 #jQuery
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 #Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 #Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 #Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 #Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 #jQuery
You might like
下载文件的点击数回填
2006/10/09 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
php生成二维码
2015/08/10 PHP
PHP数组函数知识汇总
2016/05/12 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
python 实现性别识别
2020/11/21 Python
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
开业庆典邀请函
2014/01/08 职场文书
承诺书应该怎么写?
2019/09/10 职场文书