无法绑定，因为它不是角度组件的已知属性答案

【问题标题】：Can't bind since it isn't a known property of angular component无法绑定，因为它不是角度组件的已知属性
【发布时间】：2019-04-12 14:37:14
【问题描述】：

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

  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' 的已知属性。”

【问题讨论】：

标签： css angular components

【解决方案1】：

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

@Input()
public alteredSidebar: boolean;

【讨论】：

你能提供更多关于你的问题的代码吗？

【解决方案2】：

正如@junk 所说，您应该在 app-rollup 组件中使用 @Input() 装饰器，我想补充一点，不要将 [className] 与 ngClass 混合，这可能与您的问题无关，但它如果您使用响应式属性以编程方式添加或删除一个类，那么会变得非常有问题，只需选择一个并尽量不要混合它们，这也会使代码更加一致。哦，正确的语法是 [className] 你可能把它与 [class.foo]="expresion" 混淆了，如果表达式为真，它将应用 'foo' 类

我个人会做这样的事情，也坚持一种方法是considered a best practice

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

我建议简单地设置 div-tags 类属性，如下所示

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

这样你得到一个更易读的条件？正面案例：负面案例流程，您无需将变量与任何内容进行比较。

【讨论】：