Question

我有一个 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的路由器插座中呈现。但是我希望（如果可能的话）所有其他孩子（我可以有多个级别），例如/companies/add或/companies/20仍在我的私人模板的同一路由器中呈现。我的实际代码，当然，我希望我有companies.component.html内的插座。

这对于实现我的 breadcrumb 组件并编写“Home＆gt; Companies＆gt; Apple Inc.”非常重要。

有可能创建一些这样的结构吗？

Answer 1

如果您将/companies/add设为无组件路线，/companies/20或companies路线仍会在第一个路由器插座内呈现。
这意味着您将不得不忽略该路由的组件定义，它将如下所示：

        //...
        {
            path: 'companies',
            children: [
                {
                    path: 'add',
                    component: FormCompanyComponent
                },
                {
                    path: ':id',
                    component: CompanyComponent
                }
            ]
        }

<强>更新

        {
            path: 'companies',
            component: CompaniesComponent
        },
        {
             path: 'companies/add',
             component: FormCompanyComponent
        },
        {
            path: 'companies/:id',
            component: CompanyComponent
        }

但在我看来这有点讨厌

Answer 2

添加到@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"
            }
        }
    ]
];

您需要动态修改面包屑，以使用实际公司名称更改“公司详细信息”。

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

2 个答案: