Angular 17子路由跳转异常及导航图标定制问题求助

1. 修复路由跳转路径错误 #

当前点击导航跳转到根路径/information，是因为[routerLink]="[item.path]"使用了绝对路径，而我们需要基于student父路由的相对路径，两种修改方式：

方式一：使用相对路由语法 #

在StudentComponent模板中，用.代表当前激活的父路由，修改routerLink：

<mat-nav-list>
  @for (item of routes(); track item) {
  <a mat-list-item [routerLink]="['.', item.path]" [routerLinkActive]="['router-is-active']" class="block">
    {{ item.data.name }}
  </a>
  }
</mat-nav-list>

方式二：直接拼接父路由路径 #

如果明确父路由路径，也可以直接拼接：

<mat-nav-list>
  @for (item of routes(); track item) {
  <a mat-list-item [routerLink]="['/student', item.path]" [routerLinkActive]="['router-is-active']" class="block">
    {{ item.data.name }}
  </a>
  }
</mat-nav-list>

注：routerLinkActiveOptions="{exact: true}"是控制路由激活状态的匹配规则，和跳转路径错误无关，所以之前添加无法解决问题。

2. 为导航项添加不同图标 #

步骤1：更新路由配置，新增图标字段 #

在每个子路由的data中添加icon属性（使用Angular Material Icons的图标名称）：

{
  path: "student",
  component: StudentComponent,
  canActivate: [authenticationGuard],
  data: {
      role: "student",
    },
  children: [
    {
      path: "information",
      component: InformationComponent,
      data: {
        name: "Information",
        icon: "person"
      }
    },
    {
      path: "submission",
      component: SubmissionComponent,
      data: {
        name: "Submission",
        icon: "assignment_turned_in"
      }
    },
    {
      path: "seminar-invitation",
      component: SeminarInvitationComponent,
      data: {
        name: 'Seminar',
        icon: "event"
      }
    },
  ],
}

步骤2：在模板中渲染图标 #

确保已导入Angular Material的IconModule，然后在模板中添加mat-icon标签：

<mat-nav-list>
  @for (item of routes(); track item) {
  <a mat-list-item [routerLink]="['.', item.path]" [routerLinkActive]="['router-is-active']" class="block">
    <mat-icon>{{ item.data.icon }}</mat-icon>
    <span class="ml-2">{{ item.data.name }}</span>
  </a>
  }
</mat-nav-list>

可通过添加CSS类（如ml-2）调整图标与文字的间距。

内容的提问来源于stack exchange，提问作者nikita