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页面上拖放移动标签
Jan 08 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
bootstrap表单示例代码分享
May 18 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 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
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
列表内容的选择
2006/06/30 Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
详解Python进程间通信之命名管道
2017/08/28 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
python虚拟环境迁移方法
2019/01/03 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
python 19个值得学习的编程技巧
2020/08/15 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
网络事业创业计划书范文
2014/01/09 职场文书
骨干教师培训方案
2014/05/06 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
毕业生见习报告总结
2014/11/08 职场文书
个人典型事迹材料
2014/12/30 职场文书
个人工作保证书
2015/02/28 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
公司管理建议书
2015/09/14 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书