it-swarm.com.de

Angular 2 Routing Weiterleitung mit untergeordneten Routen

Ich bin ein Neuling in Angular 2. Ich möchte isolierte Module für jeden Teil meiner App erstellen. Zum Beispiel habe ich das AuthModule mit der Standardkomponente - AuthComponent - erstellt, die einen Router-Ausgang für seine untergeordneten Komponenten (SignIn oder SignUp) enthält. Ich möchte also folgendes Szenario realisieren:

  1. Wenn Sie zu/- root off App navigieren, gehen Sie zu/auth
  2. Nach der Umleitung auf/auth laden Sie AuthComponent mit dem Router-Ausgang
  3. Nach dem Laden von AppComponent: Laden Sie die Standard-Anmeldekomponente durch Umleiten auf/auth/login

Wenn ich jedoch zu localhost gehe, bekomme ich eine Weiterleitung zu/auth, was ich will, aber die nächste Weiterleitung zur Anmeldung erscheint nicht. 

Mein 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>

Ergebnis:

code

result

Umgebung @ Angle/cli: 1.0.0-rc.2 Knoten: 7.7.1 Os: win32 x64

21

Ich war das gleiche Problem. Es scheint ein Angular-Tricks: Wenn Sie den führenden Schrägstrich im Feld "redirectTo" entfernen, wird Ihre Anwendung erfolgreich an auth/login weitergeleitet.

Verwenden Sie dies in app.routing: 

const routes: Routes = [ 

    {path: '', redirectTo: 'auth', pathMatch: 'full'}, 

];

Der Wert 'redirectTo' beginnt mit einem absoluten Pfad '/'

Der Wert "redirectTo" beginnt ohne einen relativen Pfad "/"

Lesen Sie mehr darüber: https://vsavkin.com/angular-router-understanding-redirects-2826177761fc

P. Meiner Meinung nach ist Ihre Struktur korrekter als die von YounesM. Das übergeordnete Modul kann keine untergeordneten Routen beibehalten: Das "app" -Modul weiß nicht, dass das Modul "auth" das untergeordnete Modul "login" hat.

25
Dmitriy Ivanko

Es scheint also so zu sein, dass, wenn Sie redirectTo:'auth' versuchen, die ''-Komponente von Kindern zu laden, und der Router-Ausgang leer ist, da er keine Komponente hat.

Nun scheint es, als hätte {path: '', redirectTo: 'sign-in', pathMatch: 'full'} keinen anderen Zweck, als auf sign-in umzuleiten, so dass Sie stattdessen einfach auf /auth/sign-in umleiten können.

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

];

oder Sie haben eine Komponente in Ihrem ''-Pfad, anstatt umzuleiten.

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

Sie können die Neuausrichtung in Ihrem äußeren Modul wie folgt verwenden: 

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

Sie müssen keinen leeren Pfad '' in Ihrer untergeordneten Komponente haben, wenn Sie mit einem richtigen Pfad zu diesem Pfad navigieren möchten

1
bitscanbyte

Es ist ganz einfach:

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

Ich war das gleiche Problem, aber keine der obigen Antworten scheint eine gute Lösung zu sein. In meinem Code abonniere ich die Router-Ereignisse und löse sie schließlich auf.

code im Konstruktor von 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

Sie können dies in Ihrer Kinderroute tun:

const routes: Routes = [
  { path: 'auth', redirectTo: 'auth/signin'},
  {
    path: 'auth',
    component: AuthComponent,
    children: [{ path: 'signin', component: SignInComponent }],
  },
];
0
papiliond

auf auth.routes

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

    ];
0
Chema