Angular Router 无法在自定义导航上正确导航，而是页面重定向

Question

我有一张卡：

<div
  class="flex gap-5 justify-left items-center text-center pl-5 group hover:cursor-pointer m-3 backdrop-blur-md"
  (click)="navigateTo(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>

及其 .ts 文件

export class DashboardNavCardComponent {
  @Input() icon: string = '';
  @Input() title: string = '';
  @Input() link: string = '';
  @Output() navigate: EventEmitter<string> = new EventEmitter<string>();

  navigateTo(path: string): void {
    this.navigate.emit(path);
  }
}

和父组件：

 <app-dashboard-nav-card
      [icon]="opt.icon"
      [title]="opt.title"
      [link]="opt.route"
      (navigate)="onNavigate($event)"
    ></app-dashboard-nav-card>



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

然后运行：

onNavigate(route: string): void {
    const fullPath = `./dashboard/${route}`;
    console.log(fullPath);
    this.router.navigate([fullPath]);
  }

和路线.ts

{
path: 'dashboard',
component: UserDashboardPageComponent,
title: 'Panel',
children: [
  {
    path: 'summary',
    component: DashboardSummaryComponent,
    title: 'Podsumowanie',
  },
  {
    path: 'official-exams',
    component: OfficialMaturaExamsComponent,
    title: 'Arkusze maturalne',
  },
  {
    path: 'mock-exams',
    component: MockMaturaExamsComponent,
    title: 'Próbne matury',
  },

和页面：

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

问题是，当我想访问该组件时使用导航，我会立即重定向到“面板”。

例如： 我点击“官方考试”导航，我被重定向到那里并立即进入“仪表板”，要进入“官方考试”，我必须返回浏览器功能。

原因是什么以及如何解决？

Answer 1

路由问题似乎源于调用 this.router.navigate() 时使用相对路径 (./dashboard/${route})。这种方法可能会导致意外行为，例如页面闪烁或重新加载。以下是发生这种情况的原因以及解决方法：

1. 为什么页面闪烁并重新加载 您传递给 this.router.navigate() (./dashboard/${route}) 的路径被视为相对路径。在 Angular 中，相对路线取决于当前活动路线，这可能与您的期望不符。如果解析的路由无效或者与routes.ts中配置的路由不匹配，则路由器无法正确导航。

此外，如果浏览器错误地解释路径，它可能会尝试重新加载整页，特别是在路由器无法处理的情况下。

2. 纠正路由逻辑 要解决此问题，您可以：

使用绝对路径而不是相对路径。 确保正确配置 RouterModule.forRoot() 或 forChild()。 更新您的 onNavigate 方法，如下所示：

onNavigate(route: string): void {
const fullPath = `/dashboard/${route}`; // Absolute path
console.log(fullPath);
this.router.navigate([fullPath]); // Pass as an array 
}

3. 替代调试步骤 验证路由器模块配置 确保您的 RouterModule 在 AppModule 和任何功能模块中正确设置。例如：

RouterModule.forRoot(路由) 或者 RouterModule.forChild(routes) // 如果是功能模块

检查 index.html 中的基本 Href 应正确配置 index.html 中的 base 标签：

这确保 Angular 可以正确解析 /dashboard 路由。

确认路径匹配 验证 routes.ts 中的 children 配置是否按预期工作。 router-outlet 应该解析 /dashboard 下的子路由。

4. 使用 routerLink 简化导航 您可以使用 routerLink 来简化此操作，而不是发出事件和手动导航：

[routerLink]="['/dashboard', 链接]"

这完全消除了对点击处理程序的需要，并确保 Angular 正确处理导航。