作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
路由条件:
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 -->
`
但问题是一次只有一个在工作。第二个是跳绳。
这种项目如何路由?
最佳答案
例如,您必须声明一条主路径和一条子路径:
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"
关于angular - 如何在 Angular 2 中路由多个组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40397056/
我是一名优秀的程序员,十分优秀!