Css angular2：主机属性选择器赢得'；t选择[routerLink]

如果角度组件具有

[routerLink]

属性，我将尝试将样式应用于该组件

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

在检查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);
}

//工作
：主机（[this-has-a-route]）：悬停{
背景色：rgba（125,91,190,1）；
}

---

为什么会出现这种情况？是否可以使用routerLink作为选择器？

是的，有解决方法。无论何时使用[routerLink]指令它都会在浏览器中转换为

ng reflect router link

，您可以检查代码并查看

例如：

demo

存在于你的模板中，它在浏览器

demo

因此，您可以在该属性上应用css以解决问题

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

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

---

它是一个指令，而不是一个属性。这是一个已经被要求解决的已知问题。@NeilLunn Ohhhhhhhhhhhhhhhhhhhhhhhhhhhhh。。。是的，好的！那就有道理了！那么，为了实现这一目标，目前是否有一项围绕着人们的工作？或者我应该只使用

[this-has-a-route]

作为例子吗？属性在html中没有括号，因此

我只是快速搜索了一下这个问题，但我知道它是针对@angular/flex布局提出的，因为人们非常希望根据使用的指令应用东西。您可以始终将动态路由/参数传递给
[attr.something]
，就像您所暗示的那样。@Maximus是的，但不幸的是，我正在将动态路由/参数传递给
路由链接。
      :host [ng-reflect-router-link]:hover {
        color: red !important;
      }

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