父组件与其他父子组件之间的Angular 5 routerLink [英] Angular 5 routerLink between parent component and other parent - child component

问题描述

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

There are 2 separate modules in an Angular 5 application named as core and admin.

核心路由设置为：

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

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

现在，在管理模块中，路由为：

Now, within the admin module, the routing is as :

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 。

If the application page is at "http:localhost/admin/activity", I need to add a routerLink to an HTML element so that the app navigates to "http:localhost/admin/user/detail/1".

什么我尝试过

[routerLink] = ['user / detail'，id] 这会将应用程序带到 http：// localhost / admin / activity / user / detail / 1 。

[routerLink]="['user/detail', id] but this takes the app to "http://localhost/admin/activity/user/detail/1".

预期输出

http：localhost / admin / user / detail / 1 。

请注意

管理员<路由中的/ code>关键字是动态的，我不希望在 routerLink 中进行硬编码。

推荐答案

可以通过将admin-routing.module.ts文件更改为以下方式来解决此问题：

This issue can be resolved as changing your admin-routing.module.ts file as:

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的视图。

You can see two new components: UserViewComponent and ActivityViewComponent, which simply used for the view of your current UserComponent and ActivityComponent respectively.

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

Replace the content of user.component.html (place it in user-view.component.html) and activity.component.html (place it in activity-view.component.html) by <router-outlet></router-outlet> which is very important in this task.

现在您可以以

• / admin / activity / view


• / admin / activity / detail /：id


• / admin / user / view


• / admin / user / detail /：id

• /admin/activity/view
• /admin/activity/detail/:id
• /admin/user/view
• /admin/user/detail/:id

您可以找到更多详细信息这里

You can find more details here

这篇关于父组件与其他父子组件之间的Angular 5 routerLink的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！