angular 路由跳转强制刷新页面(路由重载)

路由启动配置 首先需要在项目的根路由，一般是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事件

import { Router,NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs';
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(); // 不要忘记处理手动订阅
    }
}

会重新请求接口渲染页面

原文地址 blog.csdn.net/weixin_2992…