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

对于我的导航栏，如果li是当前页面，则给予li“active”类（使用routerLinkActive）。这很好，如果我知道什么颜色是为了设计“活跃”类。但是，如果我需要使用内联样式来设置“活动”li的样式，我该如何解决这个问题？我有一个来自API的HTML颜色，所以这就是为什么我需要把它内联。目前我有：Angular 2 - 在routerLinkActive上使用内联样式

<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是不是一个真正的主动变的打字稿生态系统内工作。

来源

2017-08-03 Andrew Junior Howard

的可能的复制[合并\ [NgStyle \]随着条件（的if..else）（https://stackoverflow.com/questions/37051496 /合-ngstyle与 - 条件的if-else） –

我遇到了同样的需求。

您可以添加 “主动” conditinal风格是这样的：

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

来源

2017-09-08 15:44:51 FabiF

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

回答

相关问题