如何动态设置组件的主机样式

Question

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

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

我认为最好将：host设置为等于路径的宽度和高度。但我还没有找到一种动态的方法。我只能从我的scss文件中设置主机上的样式，但遗憾的是我无法动态更新这些样式。

Answer 1

你可以使用@HostBinding

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