Question

我正在尝试将样式应用于角度组件，如果它具有[routerLink]属性。

<component [routerLink]="'...'">

但由于某些原因，:host(selector) css选择器似乎无法将自身附加到routerLink。

:host([routerLink]):hover{
    background-color: rgba(125, 91, 190, 1);
}

在检查html元素时，我发现[routerLink]被转换为[router-link] - 这与它有关吗？（请注意，我尝试使用[router-link]作为选择器无效。）

我知道选择器语法是正确的，因为如果我将选择器更改为自定义属性，它可以正常工作......

<component [routerLink]="'...'" this-has-a-route>
// works
:host([this-has-a-route]):hover{
    background-color: rgba(125, 91, 190, 1);
}

为什么会这样，是否可以将routerLink用作选择器？

Answer 1

是的，有解决方法。无论您使用 [routerLink]指令，它都会在浏览器中转换为ng-reflect-router-link，您可以检查代码并查看。

对于Ex：<a [routerLink]="['/demo']">demo</a>退出您的temolate，它会在浏览器中转换为<a ng-reflect-router-link="/demo">demo</a>

所以你可以在这个属性上应用你的css来解决问题

      :host [ng-reflect-router-link]:hover {
        color: red !important;
      }

      :host [ng-reflect-router-link] {
        color: yellow !important;
      }

angular2：主机attr选择器不会选择[routerLink]

1 个答案: