Eckige 2-routing umzuleiten, um mit Kind Strecken

Ich bin ein Neuling in Winkel-2. Ich will isolierte Module für jeden Teil meiner app. Zum Beispiel habe ich die AuthModule mit Standard-Komponenten - AuthComponent, die einen router Ventil für seine untergeordneten Komponenten (SignIn oder eine Anmeldung). Damit möchte ich realisieren, das folgende Szenario:

  1. Wenn Sie navigieren Sie zu /- Wurzel-aus-app - redirect /auth
  2. Nach redirect auf /auth - laden AuthComponent mit router Steckdose
  3. Nach AppComponent geladen - load default sign-in-Komponente, über die Umleitung auf /auth/sign-in

Aber wenn ich jetzt localhost/ich bekommen umgeleitet zu /auth, was ich will, aber die nächste Umleitung bei der Anmeldung nicht angezeigt.

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:

Eckige 2-routing umzuleiten, um mit Kind Strecken

Eckige 2-routing umzuleiten, um mit Kind Strecken

Umgebung
@Winkel/cli: 1.0.0-rc.2
Knoten: 7.7.1
os: win32, x64

InformationsquelleAutor der Frage Timofey Orischenko | 2017-03-18

  1. 21

    Ich habe das gleiche problem. Es scheint eine Eckige tricks:
    Wenn Sie entfernen Sie führende slash in "redirectTo" - Feld, wird Ihr Antrag weitergeleitet werden, erfolgreich zu auth/sign-in.

    Verwenden Sie diese app.routing: 

    const routes: Routes = [ 

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

];

    'redirectTo" value beginnt mit einem '/' = absoluter Pfad

    'redirectTo" value startet, ohne ein '/' = relativer Pfad

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

    P. S Meine Meinung ist, dass Ihre Struktur mehr richtig, dann YounesM. Übergeordneten Modul kann nicht halten Sie Kinder von Routen: "app" - Modul weiß nicht, dass die "auth" - Modul Kinder Modul "sign-in".

    InformationsquelleAutor der Antwort Dmitriy Ivanko

  2. 4

    So, wie es zu geschehen scheint, ist, dass, wenn Sie redirectTo:'auth' es versucht zu laden, die '' Kinder-Komponente und da es keine Komponente mit dem router-Steckdose leer ist.

    Nun scheint es, wie {path: '', redirectTo: 'sign-in', pathMatch: 'full'} hat keinen anderen Zweck dann umleiten zu sign-in so können Sie einfach umleiten, um /auth/sign-in statt.

    app.Routen

    const routes: Routes = [
  {path: '', redirectTo: '/auth/sign-in', pathMatch: 'full'}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);

    auth.Routen

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

];

    oder eine Komponente in Ihrem '' Pfad statt umzuleiten.

    app.Routen

    const routes: Routes = [
  {path: '', redirectTo: '/auth', pathMatch: 'full'}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);

    auth.Routen

    const routes: Routes = [
  {
    path: 'auth',
    component: AuthComponent,
    children: [
      {path: '', component: SignInComponent}
    ]
  },

];

    InformationsquelleAutor der Antwort YounesM

  3. 1

    Können Sie die Rück-Richtung, in Ihrer äußeren Modul, so wie dieses: 

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

    Brauchen Sie nicht, um einen leeren Pfad " in Ihrer untergeordneten Komponente im Fall, dass Sie möchten, navigieren Sie zu diesem mit einer richtigen Pfad

    InformationsquelleAutor der Antwort bitscanbyte

  4. 0

    Ist es 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' }
];

    InformationsquelleAutor der Antwort Paco

  5. 0

    Hierzu können Sie in Ihrem Kind die route:

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

    InformationsquelleAutor der Antwort papiliond

  6. 0

    Ich habe das gleiche problem, aber keine der oben genannten Antworten scheint eine gute Auflösung. In meinem code , ich schließe mich der router Veranstaltungen und schließlich, es zu lösen.

    code in AuthComponent Konstruktor:

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

    InformationsquelleAutor der Antwort johney

Schreibe einen Kommentar