Angular5 重载路由

转载：https://mp.weixin.qq.com/s?__biz=MzAwNzUzNTgxNw==&mid=2247483968&idx=1&sn=c038634c823bd2d61a398dcbbbd01790&chksm=9b7defe6ac0a66f0ab29ed62b99ee7856c172a4ef91817276ebce8db5ac6af8a4983d82bdfa1&mpshare=1&scene=24&srcid=1016kWBphTPC3rIU1nVSRDAY#rd

在Angular5 中，当点击当前路由的链接时，默认是忽略的，现在讲讲重载当前路由的几种方案

糟糕的解决方案

1. 跳出去，再跳回来。为了重载A页面，这种解决方式采用 A --> B --> A的方式使A页面重新加载。'hack'的味道非常浓重。

2. 让浏览器刷新整个页面。这对于单页应用来讲实在是非常糟糕的方法，因为它会重新加载应用，如果应用比较大，加载时间过长，用户体验极差。

Angular Style的解决方案

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

路由启动配置

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

1. const routes: Route[] = [...];

2. @ngModule({

3.    imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],

4.    exports: [RouterModule],

5. })

6. export class AppRoutingModule.ts { }

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

Route配置

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

• paramsChange 只有当参数变化时才重新启动，例如 'article/:id'，参数指的就是这里的id。

• paramsOrQueryParamsChange 当参数或查询参数变化时重新启动。例如：'article/:category?limit=10，参数指 'category'，查询参数指'limit'；

• always 无论何种情况都重新启动

这里我们使用 'paramsChange'

1. export const routes: Routes = [

2.    {

3.        path: 'article/:id',

4.        component: ArticleComponent,

5.        runGuardsAndResolvers: 'paramsChange',

6.    }

7. ]

组件中处理路由事件

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

1. export class ArticleComponent implement OnInit, OnDestroy {

2.    subscription: Subscription;

3.  

4.    constructor(private router: Router) { }

5.  

6.    ngOnInit() {

7.        this.subscription = this.router.events.pipe(

8.            filter(event => event instanceOf NavigationEnd)

9.        )

10.        .subscribe(_ => {...}) // 执行业务操作

11.    }

12.  

13.    ngOnDestroy() {

14.        this.subscription.unsubscribe(); // 不要忘记处理手动订阅

15.    }

16. }

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