Angular 4 路由 - redirectTo 与 skipLocationChange

Question

我有一些路由模块，其主要路径设置为:/canvas

const canvasRoutes: Routes = [
    {
        path: "canvas", component: CanvasComponent
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(canvasRoutes)
    ],
    exports: [
        RouterModule
    ],
    declarations: [],
    providers: []
})
export class CanvasRoutingModule {
}

在应用程序路由模块中，每次访问根路径时，我都希望将重定向路径设置为 /canvas。当前配置如下所示:

const appRoutes: Routes = [
    {
        path: "", redirectTo: "/canvas", pathMatch: "full"
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ],
    declarations: [],
    providers: []
})
export class AppRoutingModule {

}

它工作正常，对 http://localhost:4201 的访问被重定向到 http://localhost:4201/canvas。

但是，我不想在重定向后将 /canvas 路径附加到 url。如何实现？例如，有没有一种方法可以将 skipLocationChange 参数应用于此重定向，因为我将它与 router.navigate(... {skipLocationChange: true})?

Answer 1

我已经通过订阅 AppComponent 中的 router.events 并使用 手动导航到 canvas 路径解决了这个问题skipLocationChange 设置为 true。

@Component({
    ...
})
export class AppComponent {
    constructor(private router: Router) {
        this.router.events.subscribe(routerEvent => {
            if (routerEvent instanceof NavigationStart) {
                if (routerEvent.url == "/") {
                    this.router.navigate(["canvas"], {skipLocationChange: true})
                }
            }
        });
    }
}