web-dev-qa-db-fra.com

Redirection angulaire 2 vers les itinéraires enfants

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:

  1. Lorsque vous accédez à/- root off app - redirigez-vous vers/auth
  2. Après redirection vers/auth - chargez AuthComponent avec la sortie du routeur
  3. Après le chargement de AppComponent - charge le composant de connexion par défaut via une redirection vers/auth/connexion

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:

code

result

Environnement @ Angular/cli: 1.0.0-rc.2 Noeud: 7.7.1 Os: win32 x64

angularroutingchildren
21
Timofey Orischenko

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.

25
Dmitriy Ivanko

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}
    ]
  },

];
5
YounesM

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é.

1
bitscanbyte

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' }
];
0
user2912589

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');
    }
   }
  });
0
johney

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 }],
  },
];
0
papiliond

sur autoroutes

    const routes: Routes = [
    {
            path: 'auth',
            redirectTo: 'auth/sign-in'
      },
    {
        path: 'auth',
        component: AuthComponent,
        children: [
          {path: 'sign-in', component: SignInComponent}
        ]
      },

    ];
0
Chema