html - 有条件地将 CSS 类应用于 Angular 组件主机

Question

我有一个带有 bool 输入参数的 Angular 组件。根据它们是真还是假，我想给宿主添加一个 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 分别根据 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用于演示。

---

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

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

参见 this stackblitz用于演示。