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 相关文章推荐
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
Vue.js中的高级面试题及答案
Jan 13 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程序--记数器
2006/10/09 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
express启用https使用小记
2019/05/21 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
机器学习python实战之决策树
2017/11/01 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
大一军训感言
2014/01/09 职场文书
物理力学求职信
2014/02/18 职场文书
党支部公开承诺书
2014/03/28 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
夏季药店促销方案
2014/08/22 职场文书
房产协议书范本2014
2014/09/30 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
公司年夜饭通知
2015/04/25 职场文书
工作失职自我检讨书
2015/05/05 职场文书
针对吵架老公保证书
2015/05/08 职场文书
小学中队长竞选稿
2015/11/20 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
python之基数排序的实现
2021/07/26 Python