将 CSS class 有条件地应用于 Angular 组件主机

Question

我有一个带有 boolean 输入参数的 angular 组件。 根据它们是真是假，我想在主机上添加一个 CSS class 。 我知道我可以将整个组件包装在一个 div 中并使用 ngClass。 但是如果我不想在模板中添加额外的 div 怎么办？ 我只是希望主人有条件地参加这些课程。 那可能吗？ 说这是我的组件：

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

  constructor() {}
}

这就是模板的样子：

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

现在基于isSomethingTrue和isThisAlsoTrue的值，我想将 2 个不同的 CSS 类或 styles 应用到主机（以添加一些边距顶部）。 我如何在组件中做到这一点？

Answer 1

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

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

CSS styles可以定义如下：

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

请参阅此 stackblitz以获取演示。

---

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

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

请参阅此 stackblitz以获取演示。