角度 4 条件 ngClass 导航栏不起作用

Question

我试图使我的导航栏透明，但仅在主页上。但是令人费解的是，这段代码只适用于错误条件。"isHome"布尔值通过router.events.subscribe更新并正常工作。 这是我第一次尝试 Angular 4。

<nav [ngClass]="{'navbar navbar-toggleable-md bg-primary fixed-top navbar-transparent': this.isHome, 'navbar navbar-toggleable-md bg-primary fixed-top': !this.isHome} ">

Answer 1

让我们阅读ngClass 的文档(特别是object部分)：

对象 - 键是在值中给出的表达式计算结果为真值时添加的 CSS 类，否则将删除它们。

因此，以您的案例为例：

<nav [ngClass]="{
'navbar navbar-toggleable-md bg-primary fixed-top navbar-transparent': this.isHome,
'navbar navbar-toggleable-md bg-primary fixed-top': !this.isHome 
}">

这意味着：

1. 当"home"的计算结果为true时，将添加类导航栏，导航栏可切换-md，bg-primary，fixed-top和navbar-transparent。

2. 一旦"home"的计算结果为false，类navbar，navbar-toggleable-md，bg-primary，fixed-top将被移除，因为如果home计算结果为true，则有条件添加这些类。

有关深入的解释，我建议您检查问题#5763(评论)。

---

也就是说，解决您的问题很容易。您可以执行以下操作之一：

<nav class="navbar navbar-toggleable-md bg-primary fixed-top"
[class.navbar-transparent]="this.isHome">

或：

<nav class="navbar navbar-toggleable-md bg-primary fixed-top"
[ngClass]="{ 'navbar-transparent': this.isHome }">

---

另外，值得一提的是，即使可以在模板中使用this.<property>，也不建议这样做。它可以在将来的版本中简单地破坏，因为它甚至没有记录。