Question

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

这是我的RouteConfig：

{
    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} 因为嵌套路由器

我的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的路由器插座中工作，这可能吗？如果没有，我该怎么重构呢？我需要一些新鲜的想法，因为我被卡住了。我希望我的问题清楚明白。

感谢您的帮助。

Answer 1

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

从/ administrator / users路径

component: UsersComponent

将{path: '', component: UsersComponent}作为孩子添加到/ administrator / users
路线的正确顺序是：

一个。 ''
湾'add'
C。 'preview'
d。 ':page'

现在在嵌套路由器插座上的路由按预期工作。

嵌套路由器出口角度为5.2.0

1 个答案: