在同一路由器插座中加载嵌套路由

问题描述

我有一个 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 的 router-outlet 中呈现.但我希望(如果可能)所有其他孩子(并且我可以有多个级别)，例如 /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.

这对于实现我的面包屑组件和编写Home > Companies > 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.

这篇关于在同一路由器插座中加载嵌套路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！