Как проложить маршрут по нескольким компонентам в angular 2

У меня есть проект обмена сообщениями в angular 2.

Условия маршрутизации:

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"

Итак, я создал два модуля маршрутизации с именем app-routing.module.ts и inbox-routing.module.ts.

приложение-routing.module.ts

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

<сильные > Входящие-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. -->

<сильные > Входящие-message.component.ts

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

Но проблема только в том, что она работает одновременно. Второй пропущен.

Как проложить этот проект?

Ответ 1

Вы должны объявить один путь основного пути и childer, например:

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 { }

В пути для детей вы должны объявить свой

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

Ответ 2

Я предполагаю, что inbox является модулем приложения app. В этом случае вы также должны импортировать модуль inbox в модуль app следующим образом:

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

См. также ссылку Маршрутизация и навигация в Angular2: https://angular.io/docs/ts/latest/guide/router.html

Надеюсь, что это поможет.