Angular 4条件ngClass导航栏不工作

我试图让我的导航栏透明，但只在主页上。但是这个代码令人困惑，只能在假的条件下工作。 “isHome”布尔值通过router.events.subscribe更新并正常工作。这是我对角4Angular 4条件ngClass导航栏不工作

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

来源

2017-06-24 Krombopulos Michael

您是否尝试从{{isHome}}'模板中查看'isHome'的值，以查看它是否相应地将值更改为您所在的页面？ – crash

第一次尝试让我们读ngClass' docs（especifically 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 
}">

这意味着：

当 “家” 的计算结果为真，类导航栏，导航栏，可切换-MD， bg-primary，固定顶端和 navbar-transparent将被添加。
一旦“家”的计算结果为false，类导航栏，导航栏，可切换-MD，BG-小学，固定顶部将被删除，因为有添加这些类，如果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>。它可能在未来的版本中被破解，因为它甚至没有记录。

来源

2017-06-24 13:02:22 developer033

谢谢！因为我刚开始学习Angular，你能向我解释为什么我的方法不起作用吗？ –

@KrombopulosMichael不用客气。我编辑了我的答案。 – developer033

非常感谢，你的解释非常好。到目前为止，我完全误解了这个概念。 –

Angular 4条件ngClass导航栏不工作

回答

相关问题