Jak trasa na wielu komponentów w kątowym 2

Question

Mam projektu wiadomości w kątowej 2.

Routing warunki:

1) path: /login , component: LoginComponent 
2) path: /inbox , component: InboxMessageComponent 
3) path:/inbox/all , "Load InboxMessageListComponent in Right side Box Only", 
4) path:/inbox/13 , "Load InboxMessageDetailComponent in Right side Box Only" 

Więc stworzyłem dwa moduł routingu nazwie app-routing. module.ts i inbox-routing.module.ts.

app-routing.module.ts

@NgModule({ 
    imports: [ 
     RouterModule.forRoot([ 
      { path: 'login', component: LoginComponent}, 
      { path: 'inbox', component: InboxMessageComponent }, 
      { path: '', component: InboxMessageComponent }, 
      { path: '**', component: NotFoundComponent } 
     ]) 
    ], 
    exports: [RouterModule] 
}) 

Skrzynka routing.module.ts

@NgModule({ 
    imports: [ 
     RouterModule.forChild([ 
      {path: '/inbox/list',component: InboxMessageListComponent}, 
      {path: '/inbox/detail/:id',component: InboxMessageDetailComponent} 
     ]) 
    ], 
    exports: [RouterModule] 
}) 

app.component.ts

template : '<router-outlet></router-outlet>'<!--This route-outlet will load "LoginComponent/InboxComponent" depending upon the routing. --> 

Skrzynka odbiorcza message.component.ts

template:` 
<sidebar-component></sidebar-component> 
<router-outlet></router-outlet> <!-- This will load InboxMessageListComponent or InboxMessageDetailComponent --> 
` 

ale problem jest tylko jeden pracuje w danym momencie. Drugi to pomijanie.

Jak prowadzić ten rodzaj projektu?

Answer 1

Zakładam, że inbox jest modułem aplikacji app. W tym przypadku należy również zaimportować moduł inbox w module app następująco:

@NgModule({ 
    imports: [ 
     RouterModule.forRoot([ 
      { path: 'login', component: LoginComponent}, 
      { path: 'inbox', component: InboxMessageComponent }, 
      { path: '', component: InboxMessageComponent }, 
      { path: '**', component: NotFoundComponent } 
     ]), 
     MyInboxModule 
    ], 
    exports: [RouterModule] 
}) 

Zobacz także Routing łącza i Natigation w Angular2: https://angular.io/docs/ts/latest/guide/router.html

nadzieję, że to pomaga.

Answer 2

Musisz zadeklarować jeden główny ścieżka ścieżki i Childer na przykład:

import {NgModule}    from '@angular/core'; 
import {RouterModule, Routes} from '@angular/router'; 
import {AddProject} from './add-project.component'; 
import {ViewProject} from './view-project.component'; 
import {Project} from './charity-project.component'; 
import {ProjectList} from './charity-project-list.component'; 

export const routes: Routes = [ 
    { 
     path: 'project', component: Project, 
     children: [ 
      { path: '', component: ProjectList }, 
      { path: 'add', component: AddProject }, 
      { path: 'view/:id', component: ViewProject }, 
      { path: 'edit/:id', component: AddProject } 
     ] 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule] 
}) 

export class ProjectRoutes { } 

u dzieci ścieżce trzeba zadeklarować

3) path:/inbox/all , "Load InboxMessageListComponent in Left side Box Only", 
4) path:/inbox/13 , "Load InboxMessageDetailComponent in Right side Box Only"