Angular 4条件ngClass导航栏无法正常工作

Question

我试图让我的导航栏透明但只在主页上。但是这段代码令人费解的只是在虚假条件下工作。 “isHome”布尔值通过router.events.subscribe更新并正常工作。 这是我对Angular 4的第一次尝试。

namedCaptureGroups().at(i)

Answer 1

让我们阅读ngClass' docs（特别是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时，将添加类navbar，navbar-toggleable-md，bg-primary，fixed-top 和 navbar-transparent。

2. 一旦“home”评估为false，将删除类navbar，navbar-toggleable-md，bg-primary，fixed-top，因为如果home评估，则有条件添加这些类到true。

如需深入解释，我建议您查看issue#5763(comment)。

那就是说，解决你的问题很容易。你可以这样做：

<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>，但不建议这样做。它可以在未来的版本中简单地删除，因为它甚至没有记录。