：host-context(选择器)不工作

Question

我有一个这样的要求，即有一个左菜单栏，并单击任何链接的<router-outlet></router-outlet>填充了特定的组件。随着组件的填充，我希望那个特定的链接(左侧菜单栏中的li元素)用背景色突出显示。

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

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

但这是行不通的。似乎作用域只是到<router-outlet></router-outlet>为止，没有超出父组件的范围。我该怎么办？

Answer 1

您通常会通过应用routerLinkActive=“类”来实现这一点，例如，在锚标记中

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

在你的css/scss中，你可以像这样设置样式：

.active { background: salmon; }