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

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

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

希望对您有所帮助。

更新

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

onSameUrlNavigation: 'reload'

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

例子

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

保持最新并快乐编码。

Answer 2

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

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: 导航到相同路线但不同参数的路线动画

Angular 5: Route animations for navigating to the same route, but different parameters

angular5

angular-router

angular-animations