首页 > 解决方案 > Angular路由器导航到父节点

问题描述

鉴于此路径树:

const routes: Routes = [
  {
    path: 'admin',
    children: [
      { path: '', component: AdminComponent },
      {
        path: 'course',
        children: [
          {
            path: 'manage/:_id',
            children: [
              {
                path: '', component: CourseComponent,
              },
              {
                path: 'unit/:unitId',
                children: [{
                  path: '',
                  component: UnitComponent,
                }]
              }]
          },

        ]
      },
    ]
  },
];

从以下传统导航方式导航admin/course/manage/1/unit/1到父管理/:id 都不起作用。

<a routerLink="../../">router link Back</a>
<button (click)="back()">Imperative Back</button>

  protected back() {
    this.router.navigate(['../../'], { relativeTo: this.route, fragment: 'coolFrag' });
  }

这是一个StackBlitz

标签: angular

解决方案


由于您在''路线的子路径上,unit/:unitId我会假设这是因为您的路径在路线中是空的。

与父路径节点相关而不是当前的空节点将使这对您有用

this.router.navigate(['../../'], { relativeTo: this.route.parent, fragment: 'coolFrag' });

推荐阅读