如何在角度 2 中路由多个组件答案

【问题标题】：How to route on multiple components in angular 2如何在角度 2 中路由多个组件
【发布时间】：2016-11-03 08:44:09
【问题描述】：

我有一个 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。

app-routing.module.ts

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

inbox-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. -->

inbox-message.component.ts

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

但问题是一次只有一个在工作。第二个是跳过。

这样的项目如何路由？

【问题讨论】：

我也有同样的问题，请问有进展吗？
本教程指出了我猜你的问题。 angular-2-training-book.rangle.io/handout/routing/…

标签： angular angular2-routing angular2-template

【解决方案1】：

您必须声明一个主路径和子路径，例如：

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"

【讨论】：

好的，但就我而言，我在两个不同的组件中有两个路由器，名为 "app.component.ts","inbox-message.component.ts" 。两个路由器都会根据路由工作吗？
我不能分享它的私人抱歉，但你可以同时使用它们，单独使用它们，我认为会好的。

【解决方案2】：

我假设inbox 是app 应用程序的一个模块。在这种情况下，您还应该在模块app 中导入inbox 模块，如下所示：

@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

希望这会有所帮助。

【讨论】：