Question

我在仪表板模块中有两个组件这是我的模块routing.ts文件我希望有正确的路由到浏览器中的每个组件...例如，我希望当我点击管理组件中的add我转到http://localhost:4200/dashboard/admin/add，当我在超级用户组件中点击添加时，转到http://localhost:4200/dashboard/superuser/add

此时点击管理组件中的add，当我希望看到http://localhost:4200/dashboard/superuser/add时，我会看到http://localhost:4200/dashboard/admin/add ...我该如何解决此问题？

const dashboardRoutes: Routes = [
  {
    path: 'dashboard', component: ProfileComponent
  },
  {
    path: 'dashboard/superuser', component: SuperuserComponent,
    children: [
      {
        path: 'add',
        component: FormComponent
      },
      {
        path: 'video',
        component: VideoviewComponent,
      },
      {
        path: 'add/:upload',
        component: FormComponent,
      },
      {
        path: 'view',
        component: ViewComponent,
      },
      {
        path: 'edit/:id',
        component: EditComponent,
      },
      {
        path: 'discount',
        component: DiscountComponent,
      }


    ]
  },
  {
    path: 'dashboard/admin', component: AdminComponent,
    children: [
      {
        path: 'add',
        component: FormComponent
      },
      {
        path: 'video',
        component: VideoviewComponent,
      },
      {
        path: 'add/:upload',
        component: FormComponent,
      },
      {
        path: 'view',
        component: ViewComponent,
      },
      {
        path: 'edit/:id',
        component: EditComponent,
      },
      {
        path: 'discount',
        component: DiscountComponent,
      },
    ]
  },
];

@NgModule({
  imports: [
    RouterModule.forChild(dashboardRoutes)
  ],
  exports: [
    RouterModule
  ]
})

export class DashboardRouting {
}

我在仪表板模块中有2个单独的组件，每个组件在其component.html文件中都有相同的代码：

 <ul>
    <li>
      <a href="#" routerLink="add">add</a>
    </li>
    <li>
      <a href="#" routerLink="view">view all</a>
    </li>
    <li>
      <a href="#" routerLink="video">your video</a>
    </li>

  </ul>

Answer 1

您在仪表板上。

您的路线是

domain.com/dashboard.

在您的组件中，您有路由器链接。

<a href="#" routerLink="add">add</a> --> domain.com/add
<a href="#" routerLink="view">view all</a> --> domain.com/view
<a href="#" routerLink="video">your video</a> --> domain.com/video

如果您想转到正确的路线，请使用正确的路线

<a href="#" routerLink="admin/add">add</a>
OR
<a href="#" [routerLink]="['admin', 'add']">add</a>

我的组件的angular 5右路由器链接

1 个答案: