Question

对于我的导航栏，如果是当前页面，则li被赋予“active”类（使用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>

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

1 个答案: