在同一个路由器出口中加载嵌套路由答案

【问题标题】：Load nested routes in same router-outlet在同一个路由器出口中加载嵌套路由
【发布时间】：2017-07-19 18:58:25
【问题描述】：

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

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

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

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

添加到@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】：

如果您将 companies 设为无组件路由，/companies/add 或 /companies/20 路由仍将在第一个路由器出口内呈现。
这意味着您必须省略该路由的组件定义，它看起来像这样：

        //...
        {
            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
        }

但在我看来这有点讨厌

【讨论】：

但是在/companies 里面我有一个列表，选择一个就可以查看详细信息。我现在需要把我的CompaniesComponent 放在哪里？如果我有像/companies/20/employees 这样的 3 个级别呢？
如果组件是完全独立的并且并不真正属于“公司”范围内，您可以通过执行类似操作来解决您的问题（请参阅原始评论更新）