Angular 4 routing - redirectTo with 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

我已經通過訂閱router.events中的AppComponent並手動導航到skipLocationChange設置為true的canvas路徑來解決了這個問題。

@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})
                }
            }
        });
    }
}

Answer 2

有點晚了，但也許它有用：

我有同樣的問題，並設法通過在聲明Router.forRoot時添加ExtraOptions來解決它

像這樣：

imports: [ RouterModule.forRoot(routes, { initialNavigation : false }) ],

通過這種方式，您可以避免將/ canvas設置為URL的初始導航。

之后，您可以繼續使用skipLocationChange。

希望這可以幫助！