Angular 嵌套路由：导航未使用 RouterLink 进行更新

Question

我有一个路线配置

 {
    path: 'dashboard',
    component: UserDashboardPageComponent,
    title: 'xyz',
    children: [
      {
        path: '',
        component: DashboardSummaryComponent,
        title: 'Panel użytkownika',
      },
      {
        path: 'official-exams',
        component: OfficialMaturaExamsComponent,
        title: 'aaa',
      },
      {
        path: 'mock-exams',
        component: MockMaturaExamsComponent,
        title: 'bbb',
      },
      {
        path: 'exams-exercises',
        component: MaturaExamsExcercisesComponent,
        title: 'ccc',
      },

然后是仪表板页面：

<section class="flex h-[100vh]">
  <app-dashboard-navigation class="min-w-[20rem]"></app-dashboard-navigation>
  <router-outlet></router-outlet>
</section>

为了浏览各个部分，我创建了一张卡片：

<div
  class="flex gap-5 justify-left items-center text-center pl-5 group hover:cursor-pointer m-3 backdrop-blur-md"
  [routerLink]="link"
>
  <ng-icon
    class="text-3xl group-hover:text-cyan-600 transition-all duration-300"
    [name]="icon"
  ></ng-icon>
  <p
    class="text-xl font-bold group-hover:text-cyan-600 transition-all duration-300"
  >
    {{ title }}
  </p>
</div>

然后是导航：

menu: any[] = [
    {
      icon: 'tablerAtom',
      title: '',
      route: '/official-exams',
    },
    {
      icon: 'tablerPaperclip',
      title: '',
      route: '/mock-exams',
    },
    {
      icon: 'tablerNotebook',
      title: '',
      route: 'exams-exercises',
    },
  ];

然后：

 @for(opt of menu; track opt){
    <app-dashboard-nav-card
      [icon]="opt.icon"
      [title]="opt.title"
      [link]="opt.route"
    ></app-dashboard-nav-card>
    }

因此，通过左侧的导航，我想导航到 /dashboard/official-exams 或 /dashboard//mock-exams。

但是现在不行了。它不会在控制台中抛出任何错误，但它的网址发生了眨眼的变化，并且没有任何变化。

Answer 1

您需要将

menu

中指定的链接调整为相对链接而不是绝对链接。 这将允许

routerLink

相对于

ActivatedRoute

的 url 解析它们（在您的情况下是

/dashboard

）

menu: any[] = [
    {
      icon: 'tablerAtom',
      title: '',
      // resolved to /dashboard/official-exams
      route: './official-exams',
    },
    {
      icon: 'tablerPaperclip',
      title: '',
      // resolved to /dashboard/mock-exams
      route: './mock-exams',
    },
    {
      icon: 'tablerNotebook',
      title: '',
      // resolved to /dashboard/exams-exercises
      route: './exams-exercises',
    },
  ];

文档中有更多关于 使用相对路径

的信息

希望有帮助:)