Question

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

我希望此导航能够触发路由动画，但事实并非如此。如何在这两条路线之间导致路由器动画？

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

Here's a minimal app that reproduces my issue.

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

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

我希望有所帮助。

<强>更新

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

onSameUrlNavigation: 'reload'

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

示例

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

保持最新和快乐的编码。

Answer 2

我最终创建了一个完成工作的自定义RouteReuseStrategy。它主要基于this answer。

export class CustomReuseStrategy implements RouteReuseStrategy {
  storedRouteHandles = new Map<string, DetachedRouteHandle>();

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this.storedRouteHandles.set(route.routeConfig.path, handle);
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return this.storedRouteHandles.get(route.routeConfig.path);
  }

  // This is the important part! We reuse the route if
  // the route *and its params* are the same.
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig &&
      future.params.page === curr.params.page;
  }
}

Check it out on StackBlitz!

Angular 5：路由动画以导航到相同的路线，但不同的参数

2 个答案: