Question

Angular 5应用程序中有2个独立的模块，名为core和admin。

核心路由设置为：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },

  {
    path: 'admin',
    loadChildren: './../admin/admin.module#AdminModule',
    data: {
      expectedRole: Constants.ADMIN_ROLE_ID
    }
  },
];

现在，在admin模块中，路由如下：

const routes: Routes = [
    {
        path: 'activity',
        children: [
          { path: '', component: ActivityComponent },
          { path: 'detail/:id', component: ActivityDetailComponent }
        ]
    },
    {
        path: 'user',
        children: [
            { path: '', component: UserComponent },
             { path: 'detail/:id', component: UserDetailComponent },
        ]
    }
];

目标

如果应用程序页面位于"http:localhost/admin/activity"，我需要在HTML元素中添加 routerLink ，以便应用导航到"http:localhost/admin/user/detail/1"。

我尝试了什么

[routerLink]="['user/detail', id]但这会将应用转移到"http://localhost/admin/activity/user/detail/1"。

预期输出

"http:localhost/admin/user/detail/1"。

请注意

路由中的admin关键字是动态的，我不希望在routerLink中对此进行硬编码。

Answer 1

将admin-routing.module.ts文件更改为：

可以解决此问题

const routes: Routes = [
    {
        path: '',
        component: AdminComponent 
            children: [
                {
                    path: 'activity',
                    component: ActivityComponent,
                    children: [
                        {
                            path: 'view',
                            component: ActivityViewComponent
                        },
                        {
                            path: 'detail/:id',
                            component: ActivityDetailComponent
                        }
                    ]
                },
                {
                path: 'user',
                component: UserComponent,
                children: [
                        {
                            path: 'view',
                            component: UserViewComponent
                        },
                        {
                            path: 'detail/:id',
                            component: UserDetailComponent
                        }
                    ]
                }
        ]
    }
];

您可以看到两个新组件： UserViewComponent 和 ActivityViewComponent ，它们分别仅用于当前UserComponent和ActivityComponent的视图。

替换 user.component.html 的内容（将其放在user-view.component.html中）和 activity.component.html （将其置于活动中 - view {.component.html）<router-outlet></router-outlet>这在此任务中非常重要。

现在您可以

访问这些组件

/管理/活动/视图
/管理/活动/细节/：ID
/管理/用户/视图
/管理/用户/细节/：ID

您可以找到更多详情here

Answer 2

He try this one

   const routes: Routes = [
        {
            path: 'activity',
            children: [
              { path: '', component: ActivityComponent },
              { path: 'detail/:id', component: ActivityDetailComponent }
            ]
        },
        {
            path: 'user',
            children: [
                { path: '', component: UserComponent },
                 { path: 'detail/:id', component: UserDetailComponent },
            ]
        }
    ];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

RouterModule.forChild(routes) use to handle other route modules

父组件与其他父组件之间的Angular 5 routerLink

2 个答案: