路由怎么定位到当前页面的组件

之前有同学在群里问到过，为什么url已经变化了，但是页面却没有刷新，这个问题一般都会涉及到路由重载。这在angularJs里实现起来是比较直接的，只需要调用路由服务的reload方法就可以了。但是在angular里可能没有那么直接。

糟糕的解决方案

跳出去，再跳回来。为了重载A页面，这种解决方式采用 A --> B --> A的方式使A页面重新加载。'hack'的味道非常浓重。
让浏览器刷新整个页面。这对于单页应用来讲实在是非常糟糕的方法，因为它会重新加载应用，如果应用比较大，加载时间过长，用户体验极差。

angular Style的解决方案

其实在angular5.1版本中就可以通过onSameUrlNavigation解决这个问题，不幸的是官方的文档中并没有清楚的提到这个配置以及如何使用。下面我们来看下如何配置它。

路由启动配置

首先需要在项目的根路由，一般是app.routing.ts 或 app.routing.module.ts中，当然这得看你的项目是如何命名根路由的。onSameUrlNavigation的配置有2个可选值，'ignore' 和 'reload'。默认ignore，当路由请求被要求导航到当前的活动路由中时页面是不会reload的，因此不会发生任何改变的。我们希望的是reload，因此需要手动配置它的值为'reload'；

const routes: Route[] = [...];
@ngModule({imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],exports: [RouterModule],
})
export class AppRoutingModule.ts { }

值得注意的是，'reload'并不会真正的执行加载工作，它只是重新触发了路由上的events事件循环。

Route配置

接下来要解决的是，这一系列的路由事件在何种情况下应该被触发，此时我们需要配置 runGuardsAndResolvers 选项，它有3个可选值。

paramsChange 只有当参数变化时才重新启动，例如 'article/:id'，参数指的就是这里的id。
paramsOrQueryParamsChange 当参数或查询参数变化时重新启动。例如：'article/:category?limit=10，参数指 'category'，查询参数指'limit'；
always 无论何种情况都重新启动

这里我们使用 'paramsChange'

export const routes: Routes = [{path: 'article/:id',component: ArticleComponent,runGuardsAndResolvers: 'paramsChange',}
]

组件中处理路由事件

路由上的配置完成后，我们需要在组件中处理路由上的事件，在特定的事件到达时执行需要的操作，如从后台加载数据等，路由上的事件很多，'特定事件'指的是你希望处理的事件。这里我们选择NavigationEnd事件

export class ArticleComponent implement OnInit, OnDestroy {subscription: Subscription;constructor(private router: Router) { }ngOnInit() {this.subscription = this.router.events.pipe(filter(event => event instanceOf NavigationEnd)).subscribe(_ => {...}) // 执行业务操作}ngOnDestroy() {this.subscription.unsubscribe(); // 不要忘记处理手动订阅}
}

OK，到这里所有的工作就结束了，假如路由处于 'article/2'，业务逻辑需要在这里重新定位到 'article/3' 时，这下就不仅仅是url发生变化了，页面也会随之被更新。

Angular完全开发手册www.hijavascript.com