css - 如何动态样式化组件的宿主

Question

示例：https ://stackblitz.com/edit/angular-mkcfsd

我有一个图标组件（app-icon），它动态地采用路径并将路径插入到 svg 视图框中，我得到路径的高度和宽度，然后将 svg 设置为该高度和宽度。所以无论我在哪里使用图标，它都会正确对齐。我的问题是 app-icon 的包装器在每个图标的高度/宽度上增加了 3-4px，我不知道为什么。我看不到任何填充或边距。（检查 app-icon 元素并将其与其子元素进行比较）

我在想最好将 :host 设置为等于路径的宽度和高度。但我还没有找到一种方法来动态地做到这一点。我只能通过我的 scss 文件在主机上设置样式，但不幸的是我无法动态更新这些样式。

标签： cssangularangular7

Answer 1

您可以使用@HostBinding

@HostBinding('class.my-class') get myClass() {
  return true;
}