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

Question

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

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

  constructor() {}
}

这是模板的样子：

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

现在基于 isSomethingTrue 和 isThisAlsoTrue 的值，我想应用 2 种不同的 CSS classes 或样式到主机（添加一些边距-最佳）。我如何在组件中执行此操作？

Answer 1

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

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

CSS样式可以定义如下：

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

有关演示，请参阅 this stackblitz。

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

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

有关演示，请参阅 this stackblitz。

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

Apply CSS class conditionally to Angular component host

html

css

angular

angular9