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

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'类

我个人会做这样的事情，也坚持一种方法被认为是最佳实践

<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'"

这样您可以获得更易读的条件？ 正数案例：负数案例流，您不需要将变量与任何事物进行比较。