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 相关文章推荐
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
js 函数性能比较方法
Aug 24 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访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
python正则表达式面试题解答
2020/04/28 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
Django视图扩展类知识点详解
2019/10/25 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
保密工作承诺书
2014/08/29 职场文书
如何写辞职书
2015/02/26 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫
Python 全局空间和局部空间
2022/04/06 Python