：host-context（选择器）无法正常工作

Question

我有一个要求，就是有一个左菜单栏，点击任何链接<router-outlet></router-outlet>都会填充特定的组件。随着组件的填充，我希望使用背景颜色突出显示该特定链接（left-manu栏中的li元素）。

所以我在子组件中尝试这个：

:host-context(.account) li{
      background: red;
      color: red;
    }

但这不起作用。看起来范围只是在<router-outlet></router-outlet>之前，而不是在父组件中。我该怎么办？

Answer 1

你通常会通过应用routerLinkActive =“class”来做到这一点，例如在锚标签中它将是

<a class="nav-link" (click)="onSelect()" routerLink='{{route.path}}' 
  routerLinkActive="active">{{route?.data?.name}}</a>

在您的css / scss中，您可以将其设置为：

.active { background: salmon; }