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 相关文章推荐
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
ES6的新特性概览
Mar 10 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
js实现橱窗展示效果
Jan 11 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
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
javascript调试说明
2010/06/07 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
python pandas模块基础学习详解
2019/07/03 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
营销计划书范文
2015/01/17 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
学校运动会感想
2015/08/10 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis
MySQL连接控制插件介绍
2021/09/25 MySQL
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android