Angular 重载当前路由

Posted 2021-04-26 Angular完全开发手册

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

糟糕的解决方案

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'；

 
   
   
 

  
    
    
  
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发生变化了，页面也会随之被更新。