Javascript 父组件和其他父子组件之间的角度5 routerLink

Angular 5应用程序中有两个单独的模块，分别名为core和admin

核心路由设置为：

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

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

现在，在管理模块中，路由如下所示：

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元素添加路由链接，以便应用程序导航到

“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

中硬编码此问题可以通过将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（放入用户视图.component.html）和activity.component.html（放入活动视图.component.html）的内容替换为

，这在本任务中非常重要

现在，您可以按以下方式访问这些组件：

• /管理员/活动/视图
• /管理员/活动/详细信息/：id
• /管理员/用户/视图
• /管理员/用户/详细信息/：id

你可以找到更多的细节他试试这个

   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（路由）用于处理其他路由模块

我知道这是一种方法，但我更感兴趣的是在维护子路由的同时执行此操作。我认为routerLink能够处理正则表达式，以解决此问题。好的。我在谷歌上搜索过，但没有找到任何结果。你有什么建议吗？我最终做了你想做的事情他早些时候曾建议。