Kind Routing mit eckigen 2

Question

Ich bin sehr neu in eckigen 2. Ich habe versucht, eine einfache Anwendung mit Login und Dashboard Pages zu bauen. Ich muss verstehen, wie man das Routing anwendet, wie meine Anwendung benötigt.

Login-Seite ist eine unabhängige Route-Konfiguration, aber ich möchte, wenn die Anmeldung, neue neue Dashboard-Seite kommt mit Navigationsleiste und seine eigene <router-outlet>.

const routes: Routes = [ 
    { path: '', redirectTo: 'login', pathMatch: 'full' }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'register-user', component: RegisterUserComponent }, 
    //APPLICATION ROUTES WITH OWN <router-outlet> 
    { path: '**', redirectTo: 'login' } 
] 

Früher Winkel 1 haben wir ui-Router mit abstrakten Zustand und Kind Staaten verwendet.

Bitte schlagen Sie vor, wie wir das erreichen können.

Answer 1

Arbeits plunkr

https://plnkr.co/edit/MqNv6RyQvzsiZTp0Dkpf?p=preview

Erstellen einer ContainerComponent & es sollte einen eigenen Router-Ausgang & routerLinks halten.

standardmäßig Last immer auf anyComponent Verwendung RedirectTo

{ path: 'component-two', component: ComponentTwo, 
    children: [ 
     { path: '', redirectTo: 'child-one', pathMatch: 'full' }, 
     { path: 'child-one', component: ChildOne }, 
     { path: 'child-two', component: ChildTwo } 
    ] 
    } 

Answer 2

Angenommen, u ein Submodul innerhalb des Hauptmoduls haben.
So App-Modul und Login-Submodul

Verzeichnisstruktur des Hauptmoduls

app.routing.module.ts etwas sieht wie folgt aus

export const routes: Routes = [ 
    { path: '', component:LoginComponent, pathMatch: 'full'}, 
    { path: Constants.LOGINROUTE, component:LoginComponent, pathMatch: 'full'} 
    ]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes,{ useHash: true })], 
    exports: [RouterModule] 
}) 

und c orresponding login.routing.module.ts

@NgModule({ 
    imports: [RouterModule.forChild([ 
    { path: Constants.LOGINROUTE, component: LoginComponent} 
    ])], 
    exports: [RouterModule] 
}) 
export class LoginRoutingModule {} 

und dashboard.routing.module.ts wie diese

@NgModule({ 
    imports: [RouterModule.forChild([ 
    { path: Constants.DASHBOARDROUTE, component: DashboardComponent} 
    ])], 
    exports: [RouterModule] 
}) 
export class DashboardRoutingModule {} 

correspoding umfassen login.routing.module.ts in die aussehen login.module.ts und gleich für dashboard.routing.module.ts

Answer 3

Ich habe dies in meinem Projekt getan.

Sie sollten loadChildren wie diese in der Haupt app-routing.module.ts:

{ path: 'crisis-center', 
    loadChildren: 'app/modules/crisis-center/crisis.module#CrisisCenterModule' 
}, 

Und dann entfernen component von Ihrem app-module.ts file in folgendem Code

Dies ist für faul-Laden für Kinder Route verwendet:

app.modul.ts:

@NgModule({ 
     imports: [ RouterModule.forRoot(routes, { useHash: true }) 
     // ,AdminModule 
     ], 
     declarations: [ ], 
     providers: [ ], 
     bootstrap: [ AppComponent ] 
    }) 

app-routing.module.ts: Jetzt

export const routes: Routes = [ 
    { path: 'dashboard',     component: DashboardComponent }, 
    { path: 'admin', 
    loadChildren: 'app/admin/admin.module#AdminModule' 
    }, 
    { path: 'crisis-center', 
    loadChildren: 'app/modules/crisis-center/crisis.module#CrisisCenterModule' 
    }, 
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, 
    { path: '**',       component: PageNotFound}, 

]; 

fine.When die router navigiert auf dieser Strecke, verwendet es die loadChildren Zeichenfolge dynamisch die AdminModule zu laden. Dann fügt es die Routen AdminModule zu seiner aktuellen Routenkonfiguration hinzu. Schließlich lädt es die angeforderte Route zur Ziel-Admin-Komponente.

Sie können auch diese (Kinder []) verwenden in Ihrem routing Datei und eine separate Komponente für jedes Kind Routen geben kann:

const crisisCenterRoutes: Routes = [ 
    { 
    path: '', 
    component: CrisisCenterComponent, 
    children: [ 
     { 
     path: '', 
     component: CrisisListComponent, 
     children: [ 
      { 
      path: ':id', 
      component: CrisisDetailComponent, 
      canDeactivate: [CanDeactivateGuard] 
      }, 
      { 
      path: '', 
      component: CrisisCenterHomeComponent 
      } 
     ] 
     } 
    ] 
    } 
]; 

Und alle Komponenten in Ihrem speziellen module.ts Datei dann schreiben, dieses:

import { NgModule     }  from '@angular/core'; 
import { CommonModule    }  from '@angular/common'; 
import { FormsModule    }  from '@angular/forms'; 
import { CrisisCenterRoutingModule }  from './crisis-center-routing.module'; 
import { CrisisCenterComponent  }  from './crisis-center.component'; 
import { CrisisListComponent  }  from './crisis-list.component'; 
import { CrisisDetailComponent  }  from './crisis-detail.component'; 
import { CrisisCenterHomeComponent }  from './crisis-center-home.component'; 
import { CrisisService    }  from './crisis.service'; 

@NgModule({ 
    imports: [ CommonModule,CrisisCenterRoutingModule,FormsModule, ], 
    declarations: [CrisisCenterComponent ,CrisisListComponent,CrisisDetailComponent,CrisisCenterHomeComponent ], 
    providers: [ CrisisService ], 
}) 

export class CrisisCenterModule {}