web-dev-qa-db-ja.com

Angular 4ルーティング-skipLocationChangeを使用したredirectTo

メインパスが次のように設定されたルーティングモジュールがあります：_/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に追加したくありません。どうすればこれを達成できますか？たとえば、router.navigate(... {skipLocationChange: true})で使用しているときに、このリダイレクトにskipLocationChangeパラメーターを適用する方法はありますか？

angularrouting
7
Kamil Chaber

私はrouter.eventsをAppComponentに配置し、canvasをtrueに設定して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})
                }
            }
        });
    }
}
8
Kamil Chaber

少し遅れましたが、役に立つかもしれません：

私は同じ問題を抱えていて、Router.forRootを宣言するときにExtraOptionsを追加することでそれを解決することができました

このような：

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

これにより、/ canvasをURLに設定する最初のナビゲーションを回避できます。

その後、skipLocationChangeを引き続き使用できます。

お役に立てれば！

3
Aisatora