使用Angular 6访问嵌套组件中的RouterLink Active

我有一个列表组，定义为配方项目列表。我使用子路由是为了在用户单击列表元素时显示项目的描述。到目前为止，单击事件和路由正在工作，但我想将单击的项目标记为活动

recipe-list.component.html

---

我错过了什么？即使使用localRef，也不可能在嵌套组件中检索其值

routerLinkActive

指令通过订阅路由器的导航事件向活动链接添加特殊样式，请参见

您也可以在

应用程序配方项目
组件中执行相同操作，而无需使用routerLinkActive指令。（代码相同）


另一种方式，
routerLinkActive
提供一个属性，显示当前routerLink是否处于活动状态。您也可以将其作为组件注入，以检索其值并更改为活动样式

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

constructor(
  @Inject(RouterLinkActive) private activeRouter: RouterLinkActive  // inject
) { }

<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start"
  [ngClass]="{active: activeRouter.isActive}"
>
  TO BE MARKED AS ACTIVE WHEN CLICKED
</a>

路由器链接活动指令通过订阅路由器的导航事件向活动链接添加特殊样式，请参见

您也可以在
应用程序配方项目
组件中执行相同操作，而无需使用routerLinkActive指令。（代码相同）


另一种方式，
routerLinkActive
提供一个属性，显示当前routerLink是否处于活动状态。您也可以将其作为组件注入，以检索其值并更改为活动样式

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

constructor(
  @Inject(RouterLinkActive) private activeRouter: RouterLinkActive  // inject
) { }

<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start"
  [ngClass]="{active: activeRouter.isActive}"
>
  TO BE MARKED AS ACTIVE WHEN CLICKED
</a>

使用
RouterLinkActive
指令及其属性
isActive
使用
RouterLinkActive
和本地引用，可以将
isActive
的值传递给嵌套组件的
@Input（）
属性，以便在其模板中使用它来触发
ngClass

recipe-list.component.html

recipe-item.component.html

。。。
...
使用
RouterLinkActive
指令及其属性
isActive
使用
RouterLinkActive
和本地引用，可以将
isActive
的值传递给嵌套组件的
@Input（）
属性，以便在其模板中使用它来触发
ngClass

recipe-list.component.html

recipe-item.component.html

。。。
...
谢谢@Pengyy。我的实际解决方案涉及使用
isActive
，但为了方便地使用它，我必须将此布尔值传递给子组件
配方项
。因此，
recipe list
利用了
RouterLinkActive
指令，将布尔属性设置到
配方项中
我在下面添加了我的个人解决方案仅供参考，我将接受您的答案作为有效解决方案。；）@森坦扎谢谢你！顺便说一句，很好的解决方案。谢谢@Pengyy。我的实际解决方案涉及使用
isActive
，但为了方便地使用它，我必须将此布尔值传递给子组件
配方项
。因此，
recipe list
利用了
RouterLinkActive
指令，将布尔属性设置到
配方项中
我在下面添加了我的个人解决方案仅供参考，我将接受您的答案作为有效解决方案。；）@森坦扎谢谢你！顺便说一句，很好的解决方案。
<app-recipe-item 
  *ngFor="let recipeEl of recipes; 
  let i = index" [recipe]="recipeEl" 
  [routerLink]="i" style="cursor: pointer;"
  routerLinkActive
>
</app-recipe-item>

constructor(
  @Inject(RouterLinkActive) private activeRouter: RouterLinkActive  // inject
) { }

<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start"
  [ngClass]="{active: activeRouter.isActive}"
>
  TO BE MARKED AS ACTIVE WHEN CLICKED
</a>

 <app-recipe-item 
  *ngFor="let recipeEl of recipes; let i = index" 
  [recipe]="recipeEl"
  [routerLink]="i"
  routerLinkActive
  #rla="routerLinkActive"
  [currentlySelected]="rla.isActive"
  style="cursor: pointer;"
  >
</app-recipe-item>

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

...
<a [ngClass]="{active: currentlySelected}">
...