Question

我试图根据布尔变量有条件地设置类名。我已经在父组件中设置了变量：

  public alteredSidebar: boolean;

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

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

我用css文件定义了2个类，一个类称为secondsidenav，另一种称为sidenav。无论我在哪里将布尔值设置为false，我都希望类名等于secondsidenav，而在不为false的情况下，它将为sidenav。这是我在其中使用它的一个实例，我希望该类设置为“ secondsidenav”：

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

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

Answer 1

在其上使用@Input()装饰器

@Input()
public alteredSidebar: boolean;

Answer 2

正如@junk所说，您应该在app-rollup组件中使用@Input（）装饰器，我想添加，不要将[className]与ngClass混合使用，这可能与您的问题无关，但是如果您使用反应性属性以编程方式添加或删除一个类，则会遇到很多问题，只需选择一个并尽量不要将它们混合使用，这也会使代码更加一致。哦，正确的语法是[className]，您可能会将其与[class.foo] =“ expresion”混淆，如果表达式为true，它将应用'foo'类

我个人会这样做，considered a best practice

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

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

Answer 3

@Berheet ..试试这个

在组件本身中分配值alteredSidebar并像下面那样传递它

parentComponent.ts

public alteredSidebar: boolean = false;

parentComponent.html

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

在子组件中添加输入

childComponent.ts

@Input() alteredSidebar: boolean;

childComponent.html

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

Answer 4

我建议简单地按如下条件有条件地设置div-tags类属性

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

这样您可以更容易理解情况吗？正数案例：负数案例流，您无需将变量与任何事物进行比较。

无法绑定，因为它不是角度分量的已知属性

4 个答案: