web-dev-qa-db-fra.com

Angular 4 routage - redirectTo avec skipLocationChange

J'ai un module de routage dont le chemin principal est défini comme suit: /canvas

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

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

Dans le module de routage de l'application, j'aimerais que le chemin de redirection soit défini sur /canvas à chaque accès au chemin racine. Actuellement, la configuration se présente comme suit:

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

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

}

Cela fonctionne correctement et l'accès au http://localhost:4201 est redirigé vers le http://localhost:4201/canvas.

Cependant, je ne souhaite pas que le chemin /canvas soit ajouté à l'URL après la redirection. Comment cela peut il etre accompli? Existe-t-il, par exemple, un moyen d’appliquer le paramètre skipLocationChange à cette redirection comme je l’utilise avec la router.navigate(... {skipLocationChange: true})?

angularrouting
4
Kamil Chaber

J'ai résolu ce problème en m'abonnant à router.events dans AppComponent et en naviguant manuellement vers le chemin canvas avec skipLocationChange défini sur 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})
                }
            }
        });
    }
}
5
Kamil Chaber

Un peu en retard, mais peut-être que c'est utile:

J'ai eu le même problème et j'ai réussi à le résoudre en ajoutant ExtraOptions lors de la déclaration de Router.forRoot

Comme ça:

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

Avec cela, vous évitez la navigation initiale qui définit/canvas sur l'URL.

Après cela, vous pouvez continuer à utiliser skipLocationChange.

J'espère que cela t'aides!

1
Aisatora