之前有同學在群里問到過，為什么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

總結

以上是生活随笔為你收集整理的路由怎么定位到当前页面的组件_Angular 重载当前路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。