Angular 5：用于导航到相同路线但参数不同的路线动画

Question

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

我希望这个导航能够触发路由动画，但它没有。如何使路由器动画在这两条路线之间发生？

（我已经明白，与大多数路线更改不同，此导航不会破坏并创建新的PageComponent。解决方案是否改变此行为对我来说并不重要。）

这是一个重现我的问题的最小应用程序。

Answer 1

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

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

通过使用此代码，如果您单击同一路线，无论您添加到路线中的参数是什么，页面都会刷新。

我希望这有帮助。

更新

随着 Angular 6 随核心更新一起发布，您不再需要这些代码，只需将以下参数添加到您的路由导入中即可。

onSameUrlNavigation: 'reload'

该选项值'ignore'默认设置为。

例子

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

保持最新状态并快乐编码。