Angular 2 - 在 routerLinkActive 上使用内联样式

Question

对于我的导航栏，如果是当前页面，则 li 被赋予“活动”类（使用 routerLinkActive）。如果我知道颜色是什么以便设置“活动”类的样式，这很好。但是，如果我需要使用内联样式设置“活动” li 的样式，我该如何处理？我有一个来自 api 的 html 颜色，所以这就是我需要将它内联的原因。目前我有：

<li routerLinkActive="active"><a [routerLink]="['/blah']">Blah</a></li>

仅适用于预设定义的“.active”类。我怎样才能做类似下面的事情，它会用内联样式来设置它的样式？

<li routerLinkActive="active" [ngStyle]="if active{{'color': color}}"><a [routerLink]="['/blah']">Blah</a></li>

到目前为止，感谢大家的帮助，但建议的帖子无法帮助我，因为使用 routerLinkActive 并不是在 typescript 生态系统中真正起作用的活动变量。

Answer 1

我也遇到了同样的需求。

您可以像这样添加“活动”条件样式：

<li #rla="routerLinkActive" 
    routerLinkActive
    [routerLink]="['/blah']" 
    [ngStyle]="rla.isActive ? {'color': active_color} : {'color': inactive_color}">
    <a>Blah</a>
</li>