Je suis un débutant dans Angular 2. Je veux créer des modules isolés pour chaque partie de mon application. Par exemple, j'ai créé le module AuthModule avec le composant par défaut - AuthComponent, qui contient une sortie de routeur pour ses composants enfants (SignIn ou SignUp). Donc, je veux réaliser le scénario suivant:
Mais lorsque je vais sur localhost/je reçois une redirection vers/auth ce que je veux, mais la redirection suivante vers la connexion n'apparaît pas.
Mon code: App.routing
const routes: Routes = [
{path: '', redirectTo: '/auth', pathMatch: 'full'}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);
auth.routing
const routes: Routes = [
{
path: 'auth',
component: AuthComponent,
children: [
{path: '', redirectTo: 'sign-in', pathMatch: 'full'},
{path: 'sign-in', component: SignInComponent}
]
},
];
export const authRouting: ModuleWithProviders = RouterModule.forChild(routes);
auth.component.html
<div class="container">
<h1>Auth component</h1>
<router-outlet></router-outlet>
</div>
Résultat:
Environnement @ Angular/cli: 1.0.0-rc.2 Noeud: 7.7.1 Os: win32 x64
J'ai eu le même problème. Cela ressemble à une astuce angulaire: Si vous supprimez la barre oblique dans le champ 'redirectTo', votre application sera redirigée avec succès vers auth/connexion.
Utilisez ceci dans app.routing:
const routes: Routes = [
{path: '', redirectTo: 'auth', pathMatch: 'full'},
];
La valeur "redirectTo" commence par un "/" = chemin absolu
La valeur ‘redirectTo’ commence sans ‘/’ = chemin relatif
Pour en savoir plus: https://vsavkin.com/angular-router-understanding-redirects-2826177761fc
P.S Mon avis est que votre structure est plus correcte que celle de YounesM. Le module parent ne peut pas conserver les routes enfants: le module "app" ne sait pas que le module "auth" possède un module "connexion" pour les enfants.
Donc, ce qui semble arriver, c’est que lorsque vous redirectTo:'auth'
, il essaie de charger le composant ''
pour enfants et, comme il n’a aucun composant, le routeur-sortie est vide.
Il semble maintenant que {path: '', redirectTo: 'sign-in', pathMatch: 'full'}
n’ait plus d’utilité que de rediriger vers sign-in
. Vous pouvez donc simplement rediriger vers /auth/sign-in
.
app.routes
const routes: Routes = [
{path: '', redirectTo: '/auth/sign-in', pathMatch: 'full'}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);
auth.routes
const routes: Routes = [
{
path: 'auth',
component: AuthComponent,
children: [
{path: 'sign-in', component: SignInComponent}
]
},
];
ou avoir un composant dans votre chemin ''
au lieu de rediriger.
app.routes
const routes: Routes = [
{path: '', redirectTo: '/auth', pathMatch: 'full'}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);
auth.routes
const routes: Routes = [
{
path: 'auth',
component: AuthComponent,
children: [
{path: '', component: SignInComponent}
]
},
];
Vous pouvez utiliser la re-direction dans votre module externe, comme ceci:
// Root routing module or app.routing.module
const routes: Routes = [
{path: '', redirectTo: '/auth', pathMatch: 'full'},
{path: 'auth', redirectTo: '/auth/sign-in', pathMatch: 'full'}
];
// Child routing module or child.routing.module
const routes: Routes = [
{
path: 'auth',
//component: AuthComponent, may not need this as you only need the template
children: [
{path: 'sign-in', component: SignInComponent}
]
},
];
Vous n'avez pas besoin d'avoir un chemin vide '' dans votre composant enfant si vous voulez y accéder avec un chemin approprié.
C'est assez simple:
const routes: Routes = [
{ path: '', redirectTo: '/auth/signin', pathMatch: 'full' },
{ path: 'auth', component: AuthComponent,
children: [
{ path: 'signup', component: SignupComponent },
{ path: 'signin', component: SigninComponent },
{ path: 'logout', component: LogoutComponent }
]
},
{ path: '**', redirectTo: '/auth/signin', pathMatch: 'full' }
];
J'ai eu le même problème, mais aucune des réponses ci-dessus ne semble être une bonne solution. Dans mon code, je souscris aux événements du routeur et je les résous enfin.
code dans le constructeur d'AuthComponent:
this.router.events.subscribe((e: Event) => {
if (e instanceof NavigationEnd) {
this.activeUrl = e.urlAfterRedirects || e.url;
if (this.activeUrl === '/auth') {
this.router.navigateByUrl('/auth/sign-in');
}
}
});
Vous pouvez le faire dans votre parcours enfant:
const routes: Routes = [
{ path: 'auth', redirectTo: 'auth/signin'},
{
path: 'auth',
component: AuthComponent,
children: [{ path: 'signin', component: SignInComponent }],
},
];
sur autoroutes
const routes: Routes = [
{
path: 'auth',
redirectTo: 'auth/sign-in'
},
{
path: 'auth',
component: AuthComponent,
children: [
{path: 'sign-in', component: SignInComponent}
]
},
];