Angular刷新当前页面的实现方法

 更新时间:2018年11月21日 09:04:46   作者:staven  
这篇文章主要介绍了Angular刷新当前页面的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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);
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 详解Angular2组件之间如何通信

    详解Angular2组件之间如何通信

    本篇文章主要介绍了详解Angular2组件之间如何通信,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • AngularJS中实现用户访问的身份认证和表单验证功能

    AngularJS中实现用户访问的身份认证和表单验证功能

    这篇文章主要介绍了AngularJS中实现用户访问的身份认证及表单验证功能的方法,Angular是Google开发的一款浏览器端的高人气JavaScript框架,需要的朋友可以参考下
    2016-04-04
  • 整理AngularJS框架使用过程当中的一些性能优化要点

    整理AngularJS框架使用过程当中的一些性能优化要点

    这篇文章主要介绍了AngularJS框架使用过程当中的一些性能优化要点,Angular通常被用来制作大型单页应用,因而性能问题也是必须考虑的因素,需要的朋友可以参考下
    2016-03-03
  • Angular实现类似博客评论的递归显示及获取回复评论的数据

    Angular实现类似博客评论的递归显示及获取回复评论的数据

    这篇文章主要给大家介绍了关于Angular如何实现类似博客评论的递归显示及获取回复评论的数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • angularJS 指令封装回到顶部示例详解

    angularJS 指令封装回到顶部示例详解

    本篇文章主要介绍了angularJS 指令封装回到顶部示例详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • angularjs实现table增加tr的方法

    angularjs实现table增加tr的方法

    下面小编就为大家分享一篇angularjs实现table增加tr的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Angular2从搭建环境到开发步骤详解

    Angular2从搭建环境到开发步骤详解

    本文的内容主要是想帮助那些想学习Angular2的朋友们,因为我自己在玩Angular2时碰到了不少坑,而且Angular2语法一直处于变化中,让人很头疼。不过也怪不了Anguar2,因为它现在是处于并长期处于alpha阶段,下面就通过本文来学习Angular2的搭建环境和开发吧。
    2016-10-10
  • AngularJS使用ngMessages进行表单验证

    AngularJS使用ngMessages进行表单验证

    这篇文章主要介绍了AngularJS使用ngMessages进行表单验证的相关资料,需要的朋友可以参考下
    2015-12-12
  • 浅谈AngularJS中ng-class的使用方法

    浅谈AngularJS中ng-class的使用方法

    下面小编就为大家带来一篇浅谈AngularJS中ng-class的使用方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • Angular.js实现获取验证码倒计时60秒按钮的简单方法

    Angular.js实现获取验证码倒计时60秒按钮的简单方法

    最近做项目的时候又遇到了验证码倒计时的需求,发现这个功能还是挺实用的,所以就想着总结一下,下面这篇文章主要给大家介绍了关于利用Angular.js如何实现获取验证码倒计时按钮的简单方法,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-10-10

最新评论