将嵌套路由加载到同一路由器出口中 [英] Load nested routes in same router-outlet
问题描述
我有一个 Angular 4 应用程序,而我的private.component.html
类似这样:
I have an Angular 4 application and my private.component.html
something like this:
<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
的路由器出口中呈现.但是我希望(如果可能)所有其他子级(并且我可以有多个级别),例如/companies/add
或/companies/20
仍呈现在我的私有模板的同一 router-outlet 中.当然,我的实际代码希望我在companies.component.html
内有插座.
All components on first level is rendered in router-outlet of PrivateComponent
. But I want (if possible) all other child (and I can have multiple levels), like /companies/add
or /companies/20
still rendered in the same router-outlet of my private template. My actual code, sure, expect I have the outlet inside the companies.component.html
.
例如,这对于实现我的 breadcrumb 组件并编写首页>公司> Apple Inc." 非常重要.
This is important to implement my breadcrumb component and write "Home > Companies > Apple Inc.", for example.
是否可以创建类似的结构?
It's possible create some structure like that?
推荐答案
在@Karsten的答案中,基本上您想要的是拥有一个无组件的路由和空路径作为默认组件,例如:
Adding to @Karsten's answer, basically what you want is to have a componentless route and the empty path as the default component such as this:
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"
}
}
]
];
您将需要动态修改面包屑,以使用实际的公司名称更改公司详细信息".
You will need to modify the breadcrumb dynamically to change "Company Details" with the actual company name.
这篇关于将嵌套路由加载到同一路由器出口中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!