Angular 6中如何在嵌套组件中使用RouterLinkActive标记激活项

首先得明确：RouterLinkActive 指令需要和 routerLink 作用在同一个DOM元素上，或者确保自定义组件能正确传递相关属性到内部可点击元素。针对你的场景，这里提供两种靠谱的解决方案：

方案1：在子组件内部应用RouterLinkActive（推荐） #

如果你的 <app-recipe-item> 组件内部有用于渲染项的容器（比如 <div> 或 <li>），把路由相关指令移到这个内部元素上，激活状态能更精准地作用到可视元素上。

步骤1：修改子组件模板（recipe-item.component.html） #

<!-- 把routerLink和routerLinkActive绑定到内部容器上 -->
<div 
  [routerLink]="[index]" 
  routerLinkActive="active" 
  [routerLinkActiveOptions]="{exact: true}"
  style="cursor: pointer;"
>
  <!-- 这里放你的recipe-item内容，比如标题、描述等 -->
  <h3>{{ recipe.name }}</h3>
  <p>{{ recipe.description }}</p>
</div>

步骤2：修改父组件模板（recipe-list.component.html） #

移除父组件上的 routerLink 绑定，改为传递索引给子组件：

<app-recipe-item 
  *ngFor="let recipeEl of recipes; let i = index" 
  [recipe]="recipeEl" 
  [index]="i"
></app-recipe-item>

步骤3：子组件类添加输入属性（recipe-item.component.ts） #

import { Component, Input } from '@angular/core';
import { Recipe } from './你的食谱模型路径';

@Component({
  selector: 'app-recipe-item',
  templateUrl: './recipe-item.component.html',
  styleUrls: ['./recipe-item.component.css']
})
export class RecipeItemComponent {
  @Input() recipe!: Recipe;
  @Input() index!: number;
}

步骤4：定义激活样式 #

在子组件的CSS文件中添加激活状态的样式：

.active {
  background-color: #f5f5f5;
  border-left: 3px solid #2196f3;
  color: #2196f3;
  /* 其他你需要的激活样式，比如内边距调整 */
}

方案2：直接在父组件的自定义组件标签上使用RouterLinkActive #

如果想保持父组件的绑定方式，需要设置 routerLinkActiveOptions 并处理样式穿透问题。

修改父组件代码 #

<app-recipe-item 
  *ngFor="let recipeEl of recipes; let i = index" 
  [recipe]="recipeEl" 
  [routerLink]="i" 
  routerLinkActive="active"
  [routerLinkActiveOptions]="{exact: true}"
  style="cursor: pointer;"
></app-recipe-item>

样式穿透（适配Angular默认的Emulated视图封装） #

在父组件的CSS中使用穿透选择器，让激活样式作用到子组件内部元素：

:host ::ng-deep app-recipe-item.active > div {
  background-color: #f5f5f5;
  border-left: 3px solid #2196f3;
  color: #2196f3;
}

关键注意点 #

• exact: true 的必要性：确保只有当路由完全匹配当前索引时才添加激活类，避免出现多个项同时被标记为激活的情况（比如路由为 /recipes/1 时，/recipes/0 不会被误激活）。
• 样式作用范围：如果使用组件视图封装，要确保激活样式能正确作用到目标元素，要么在子组件内定义样式，要么用穿透选择器。
• 路由路径匹配：确认 [routerLink]="i" 生成的路径和你的子路由配置一致，比如父路由是 recipes，点击后应该导航到 recipes/0、recipes/1 这类符合子路由 recipes/:id 格式的路径。

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