Angular 5.2中，导航链接对应双URL时如何标记活动状态？

嘿，我正好碰到过类似的Angular路由导航激活问题，给你捋捋怎么解决哈！

你现在的场景是ProfileComponent作为父组件，带着页头和导航栏，通过<router-outlet>加载详情和活动两个子组件，默认显示详情页，需要让对应路由的导航链接正确高亮对吧？Angular自带的routerLinkActive指令就能搞定，但因为两个路由是层级关系（详情是父级路由，活动是子路由），直接用会有小坑，得稍作调整：

1. 基础写法：给链接加激活指令与精确匹配 #

在你的导航栏HTML里，给每个导航链接加上routerLinkActive指定激活时的CSS类（比如active-link），同时给详情页的链接加上exact: true的配置，避免在活动页时详情链接也被误激活：

<nav class="profile-nav">
  <!-- 详情页链接：精确匹配路由 -->
  <a routerLink="/profile/{{userId}}" 
     routerLinkActive="active-link"
     [routerLinkActiveOptions]="{ exact: true }">
    个人详情
  </a>
  <!-- 活动页链接：默认匹配包含该路径的路由 -->
  <a routerLink="/profile/{{userId}}/activity" 
     routerLinkActive="active-link">
    我的活动
  </a>
</nav>

为啥要加exact: true？因为活动页的路由/profile/:id/activity是包含详情页路由/profile/:id的，默认情况下routerLinkActive会匹配所有包含该路径的路由，导致你在活动页时，详情链接也会显示激活状态。加上这个配置后，只有当URL完全等于详情页路径时，才会标记该链接为激活。

2. 推荐写法：用数组形式的routerLink（适配动态参数） #

如果你的用户ID是动态获取的，更推荐用数组形式的routerLink，避免字符串拼接的麻烦，用法和上面一致：

<nav class="profile-nav">
  <a [routerLink]="['/profile', userId]" 
     routerLinkActive="active-link"
     [routerLinkActiveOptions]="{ exact: true }">
    个人详情
  </a>
  <a [routerLink]="['/profile', userId, 'activity']" 
     routerLinkActive="active-link">
    我的活动
  </a>
</nav>

3. 嵌套路由场景的相对路径写法 #

要是你的路由配置里，详情页是ProfileComponent的默认子路由（比如path: '', component: ProfileDetailsComponent），活动页是path: 'activity', component: ProfileActivityComponent，那还可以用相对路由的写法，更灵活：

<nav class="profile-nav">
  <!-- 相对当前路由的默认子路由（详情页） -->
  <a [routerLink]="['./']" 
     routerLinkActive="active-link"
     [routerLinkActiveOptions]="{ exact: true }">
    个人详情
  </a>
  <!-- 相对当前路由的activity子路由 -->
  <a [routerLink]="['./activity']" 
     routerLinkActive="active-link">
    我的活动
  </a>
</nav>

这种写法不需要硬编码完整路由路径，后续如果父路由的路径有变化，导航链接也不用跟着改，维护起来更方便。

只要做好exact属性的配置，就能精准控制每个导航链接的激活状态啦！

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