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

Question

我有一个带有布尔输入参数的角度分量。根据它们是真是假，我想向主机添加一个 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 类或样式（以添加一些顶部边距）。我如何在组件中做到这一点？

Answer 1

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

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

CSS 样式可以定义如下：

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

请参阅此 stackblitz的演示。

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

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

请参阅此 stackblitz的演示。