Angular 点击当前路由刷新并且重置状态

1. 需求

最近接到一个新需求，需要在公司的后台管理项目上，点击当前 tab 页面刷新，并且组件内的状态重置。

2. 查找

经过查找，找到如下代码：

app.routing.ts：

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

上面代码好用，但是只是路由刷新，虽然路由系统里面的事件也都能重新加载，但是路由对应的页面状态并没有重置。

3. 思考 & 结果

其实实现这个功能思路也很简单，可以建一个空白页面，判断当前点击的路由是否是当前页面，如果相等，则先定位到空白页面，然后再跳转回来，这样就能实现需求了。

Angular 作为一个大而全的框架，当然也有对应的方法，如下：

this.router.navigateByUrl('/blank', {skipLocationChange: true})
  .then(()=>this.router.navigate([<route>]));

router 下的 navigateByUrl 函数返回一个 Promise, skipLocationChange 表示是否将新状态推入历史记录。经过我的测试它为 true 时，点击跳转的时候，url 地址没有发生改变，为 false 时发生了改变。