我有一个 Angular 4 应用程序和我的 private.component.html
是这样的:
<app-breadcrumb></app-breadcrumb>
<router-outlet></router-outlet>
还有我的路线:
const privateRoutes: Routes = [
{
path: '',
component: PrivateComponent,
children: [
{
path: 'dashboard',
component: DashboardComponent
},
{
path: 'settings',
component: SettingsComponent
},
{
path: 'companies',
component: CompaniesComponent,
children: [
{
path: 'add',
component: FormCompanyComponent
},
{
path: ':id',
component: CompanyComponent
}
]
}
]
}
];
第一层的所有组件都在 PrivateComponent
的 router-outlet 中呈现。但我希望(如果可能的话)所有其他 child (我可以有多个级别),比如 /companies/add
或 /companies/20
仍然呈现在同一个 router-outlet 我的私有(private)模板。当然,我的实际代码希望我在 companies.component.html
中有 socket 。
这对于实现我的面包屑导航 组件并写入“Home > Companies > Apple Inc.”很重要。,例如。
有可能创建这样的结构吗?
最佳答案
添加到@Karsten 的回答,基本上你想要的是有一个无组件路由和空路径作为默认组件,例如:
const privateRoutes: Routes = [
path: 'companies',
data: {
breadcrumb: 'Companies'
}
children: [{
path: '', //url: ...companies
component: CompaniesComponent,
} {
path: 'add', //url: ...companies/add
component: FormCompanyComponent,
data: {
breadcrumb: 'Add Company' //This will be "Companies > Add Company"
}
}, {
path: ':id', //url: ...companies/5
component: CompanyComponent
data: {
breadcrumb: 'Company Details' //This will be "Companies > Company Details"
}
}
]
];
您需要动态修改面包屑以使用实际公司名称更改“公司详细信息”。
关于angular - 在同一路由器 socket 中加载嵌套路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45198938/