时间戳

首页 > 解决方案 > 为什么@HostBinding 不设置类？

angular - 为什么@HostBinding 不设置类？

问题描述

我在组件中有绑定：

@HostBinding('class.centered') public centered: boolean;

ngOnInit() {
   this.centered = true;
}

款式：

:host {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.centered {
  margin: 0 auto;
  display: block;
}

如果检查 Google HTML，我会看到：

<app-map id="map" _nghost-ops-c160="" ng-version="10.2.5" class="centered" style="width: 800px; height: 800px;"></app-map>

为什么类.centered不适用？

标签： angular

解决方案

我假设在这个问题中，您指的是您希望出现在元素上的样式app-map没有出现。

这可能是由于您如何构建 CSS。您可以看到，在您展示的 HTML 片段中，元素 has class="centered"，这告诉我们它已成功将该类应用到元素，但您的 CSS，如所写，仅适用于 app-map. 您的 CSS 将适用于以下结构：

<app-map>
   <div class="centered"></>
</app-map>

为了使这项工作如您所愿，请将您的 CSS 更改为：

:host {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* Notice there is no space between ":host" and ".centered"*/
:host.centered {
  margin: 0 auto;
  display: block;
}

这指定了以下结构：

<app-map class="centered"></app-map>

推荐阅读