Html 有条件地将CSS类应用于角度构件主体

我有一个带有布尔输入参数的角度分量。根据它们是真是假，我想向主机添加一个CSS类。我知道我可以将整个组件封装在一个div中并使用ngClass。但是如果我不想在模板中添加额外的div呢？我只希望主机有条件地拥有这些类。可能吗？ 假设这是我的组件：

 export class AssetDetailsComponent {
  @Input isSomethingTrue = true;
  @Input isThisAlsoTrue = true;

  constructor() {}
}

这就是模板的外观：

<h1> Page heading </h2>
<p> Details </p>

页面标题
细节

---

现在，根据

isSomethingTrue

和

isThisAlsoTrue

的值，我想向主机应用两种不同的CSS类或样式（添加一些页边空白顶部）。如何在组件中执行此操作？

您可以将

@HostBinding

与

@Input

属性相结合，根据属性值有条件地将类应用于组件主机。在下面的代码中，类

class1

和类

class2

分别根据

condition1

和

condition2

应用于主体元素：

@HostBinding（“class.class1”）@Input（）条件1:boolean；
@HostBinding（“class.class2”）@Input（）条件2:boolean；

CSS样式可以定义如下：

：host.class1{
边缘顶部：20px；
}
：host.class2{
左边距：10px；
}

请参见演示

---

另一种语法是在组件元数据中设置主机类绑定：

@组件({
...
主持人:{
“[class.class1]”：“条件1”，
“[class.class2]：“条件2”
}
})
导出类子组件{
@输入（）条件1：布尔值；
@输入（）条件2：布尔值；
}

---

请参阅以获取演示。

ngClass不必在div标记中使用，您也可以在其他标记中使用ngClass，例如在您的情况下

h1

或

p

。您也可以在这些标记中添加条件类。这样，您就不需要任何额外的div来包装组件。