将CSS类有条件地应用于Angular组件宿主

Question

我有一个带有布尔类型输入参数的 Angular 组件。根据它们是 true 还是 false，我想向宿主元素添加 CSS 类。我知道我可以在组件外部包装一个 div 并使用 ngClass。但是如果我不想在模板中添加额外的 div，我只想在满足条件时向宿主添加类，是否可能实现呢？假设这是我的组件：

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

  constructor() {}
}

这是模板的外观：

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

现在基于 isSomethingTrue 和 isThisAlsoTrue 的值，我想要对主机应用2个不同的CSS类或样式（以添加一些margin-top）。我该如何在组件中实现？

- guacamole

---

不必在 div 标签中使用 ngClass，您也可以在其他标签中使用 ngClass，例如在您的情况下使用 h1 或 p。您也可以在这些标签中添加条件类。通过这种方式，您无需添加任何额外的 div 来包装组件。 - Nazem Mahmud Piash

Answer 1

您可以将@HostBinding与@Input属性结合使用，根据属性值有条件地将类应用于组件宿主。在下面的代码中，基于condition1 和 condition2属性值将类class1 和class2 应用于宿主元素：

@HostBinding("class.class1") @Input() condition1: boolean;
@HostBinding("class.class2") @Input() condition2: boolean;

CSS样式可以定义如下：

:host.class1 {
  margin-top: 20px;
}
:host.class2 {
  margin-left: 10px;
}

点击 此处 查看演示。

---

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

@Component({
  ...
  host: {
    "[class.class1]": "condition1",
    "[class.class2]": "condition2"
  }
})
export class ChildComponent {
  @Input() condition1: boolean;
  @Input() condition2: boolean;
}

点击此处查看演示。

- ConnorsFan