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上使用內聯樣式

回答

相關問題