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 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 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/01/04 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
php生成curl命令行的方法
2015/12/14 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
python任务调度实例分析
2015/05/19 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
人工神经网络算法知识点总结
2019/06/11 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
道路建设实施方案
2014/03/18 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
mysql 带多个条件的查询方式
2021/06/05 MySQL
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS