Css Can'；不要绑定，因为它不是'；t角分量的已知性质

我试图基于布尔变量有条件地设置类名。我已在父组件内设置了变量：

  public alteredSidebar: boolean;

这是我有条件地定义它是哪个类的思考过程：

  <div [class]="alteredSidebar == false ? 'secondsidenav' : 'sidenav'" id="rollup-sidenav" [ngClass]="{ 'greyout': greyOut }"></div>

我用css文件定义了两个类，一个叫做secondsidenav，另一个叫做sidenav。无论我在哪里将布尔值设置为false，我都希望类名等于secondsidenav，如果不是false，则为sidenav。下面是我使用它的一个实例，我希望该类设置为“secondsidenav”：

<app-rollup [data]="rollupData" (resetCalled)="onRollupReset()" (entrySelected)="onRollupSelectEvent($event)" [alteredSidebar]="false">
            </app-rollup> 

但是，我遇到以下错误：“无法绑定到'alteredSidebar'，因为它不是'app rollup'的已知属性。”

对其使用

@Input（）

装饰程序

@Input()
public alteredSidebar: boolean;

---

正如@junk所说，你应该在应用程序汇总组件中使用@Input（）decorator，我想补充的是，不要将[className]与ngClass混合，这可能与你的问题无关，但如果你使用被动属性以编程方式添加或删除类，那么它会出现问题，只需选择一个，尽量不要将它们混合在一起，这也会使代码更加一致。哦，正确的语法是[className]，您可能会把它与[class.foo]=“expresion”混淆，如果表达式为true，它将应用'foo'类

就我个人而言，我会做类似的事情，同时坚持一种方法是

希望这有帮助，如果没有，请告诉我

@Berheet。。试试这个

在组件本身中指定值

alteredSidebar

，并按如下方式传递

parentComponent.ts

public alteredSidebar: boolean = false;

@Input() alteredSidebar: boolean;

parentComponent.html

<app-rollup [data]="rollupData" (resetCalled)="onRollupReset()" (entrySelected)="onRollupSelectEvent($event)" [alteredSidebar]="alteredSidebar">
            </app-rollup> 

<div [class]="alteredSidebar == false ? 'secondsidenav' : 'sidenav'" id="rollup-sidenav" [ngClass]="{ 'greyout': greyOut }"></div>

childComponent.html

<app-rollup [data]="rollupData" (resetCalled)="onRollupReset()" (entrySelected)="onRollupSelectEvent($event)" [alteredSidebar]="alteredSidebar">
            </app-rollup> 

<div [class]="alteredSidebar == false ? 'secondsidenav' : 'sidenav'" id="rollup-sidenav" [ngClass]="{ 'greyout': greyOut }"></div>

---

我建议只需按如下条件设置div tags类属性

[class]="alteredSidebar ? 'sidenav' : 'secondsidenav'"

---

这样你可以得到一个更可读的条件？正面案例：负面案例流，您不需要将变量与任何东西进行比较。

您可以提供更多关于您的问题的代码吗？