Angular 5:用于导航到相同路径但参数不同的路径动画 [英] Angular 5: Route animations for navigating to the same route, but different parameters

问题描述

在我的Angular 5应用程序中，用户可以导航到使用相同路线但参数不同的路线.例如，它们可能从/page/1导航到/page/2.

In my Angular 5 application, the user may navigate to a route which uses the same route, but with different parameters. For example, they may navigate from /page/1 to /page/2.

我希望此导航触发路由动画，但不是.如何使路由器动画在这两条路线之间发生?

I want this navigation to trigger the routing animation, but it doesn't. How can I cause a router animation to happen between these two routes?

(我已经了解到，与大多数路线更改不同，此导航不会破坏并创建新的PageComponent.对于我来说，解决方案是否更改此行为也无关紧要.)

(I already understand that unlike most route changes, this navigation does not destroy and create a new PageComponent. It doesn't matter to me whether or not the solution changes this behavior.)

这是一个再现我问题的最小应用程序.

推荐答案

这是一个古老的问题，但是如果您仍在搜索中就可以了. 将此代码添加到您的app.Component.ts文件中.

This is an old question but that's it if you're still searching. Add this code to your app.Component.ts file.

import { Router, NavigationEnd } from '@angular/router';

constructor(private _Router: Router) { }

ngOnInit() {
  this._Router.routeReuseStrategy.shouldReuseRoute = function(){
  return false;
  };
  this._Router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
        this._Router.navigated = false;
        window.scrollTo(0, 0);
    }
  });
}

通过使用此代码，无论您添加到该路由的参数是什么，如果您单击相同的路由，页面都将刷新.

By using this code the page is going to refresh if you clicked on the same route no matter what is the parameter you added to the route.

我希望能帮上忙.

更新

随着Angle 6与核心更新一起发布，您不再需要任何代码，只需将以下参数添加到routs导入中即可.

As angular 6 is released with core updates you don't need this punch of code anymore just add the following parameter to your routs import.

onSameUrlNavigation: 'reload'

此选项值默认设置为'ignore'.

示例

@NgModule({
  imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload'})],
  exports: [RouterModule]
})

保持最新和愉快的编码.

Stay up to date and happy coding.

这篇关于Angular 5:用于导航到相同路径但参数不同的路径动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！