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手动导航到设置为true 的canvas路径解决了这个问题skipLocationChange.

@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。

希望这可以帮助！