嵌套 router-outlet 于 angular 5.2.0

Question

当涉及到很多孩子时，我在 Angular 中嵌套路由时遇到问题。

这是我的路由配置：

{
    path: '',
    canActivate: [Auth],
    component: LayoutComponent,
    children: [
    {
        path: 'administrator',
        component: AdministratorComponent,
        canActivate: [Role],
        children: [
        {
            path: "users",
            component: UsersComponent,
            children: [
            {path: ':page', component: UsersComponent},
            {
                path: 'preview',
                children: [
                    {path: ':id', component: UsersComponent}
                ]
            },
            {path: 'add', component: UsersEditComponent},
            {
                path: 'edit',
                children: [
                   {path: ':id', component: UsersEditComponent}
                ]
            }
            ]
        },
        {path: "params", component: ParamsComponent}
    ]
}

}

问题显示在路线上 /administrator/users/add /administrator/users/edit/{id} /administrator/users/preview/{id} 因为嵌套 router-outlet

我的app.component.html

<router-outlet (deactivate)="onDeactivate()"></router-outlet>

我的管理员组件

<div class="col s12">
    <div class="row tab-content">
        <router-outlet></router-outlet>
    </div>
</div>

在 AdministratorComponent 中我动态加载了 UsersComponent 或 ParamsComponent，我对这种情况下的 UsersComponent 感兴趣，它看起来像这样：

<div class="users-table">    
<!--some code--!>
    <a [routerLink]="['/administrator', 'users', 'add']" routerLinkActive="active">Add</a>
</div>

现在我要归档的是使这个 <a> 元素在 AdministratorComponent 的 router-outlet 中工作，这可能吗？如果不是，我应该如何重构它？我需要一些新的想法，因为我被卡住了。我希望我的问题很清楚。

感谢您的帮助。

Answer 1

好的，我找到了这个例子的解决方案：

从 /administrator/users 路径中删除 component: UsersComponent
将 {path: '', component: UsersComponent} 作为 child 添加到 /administrator/users
正确的路线顺序是：

一个。 ''
b. 'add'
C。 'preview'
d. ':page'

现在嵌套 router-outlet 上的路由按我预期的方式工作。

嵌套 router-outlet 于 angular 5.2.0

Nested router-outlet in angular 5.2.0

nested

angular-routing

angular