angular - 使用主机绑定(bind)设置自定义 CSS 变量不起作用

Question

我想在我的 TS 组件中设置一个 css 变量，并将值设置为 Input()。继承人我有什么不工作:@HostBinding('style.--customVar') @Input() myInput = 'val';所以我希望 html 看起来像:<my-component style="--customVar:val"></my-component>但是我的主机绑定(bind)似乎没有触发。我知道我已经正确设置了 hostBinding，因为如果我执行以下操作:@HostBinding('style.backgroundColor') @Input() myInput = 'black';它工作正常。有什么建议么？

Answer 1

在寻找 @Hostbinding 的解决方案时遇到了这个问题问题并记录了您的问题...(好像 Hostbinding needs some attention 来自 Angular 团队)
使用 setProperty 动态设置 CSS 变量
https://coryrylan.com/blog/theming-angular-apps-with-css-custom-properties

const key1 = `--theme-secondary-${color.name}`;
const value1 = color.hex;

// set variable value
document.documentElement.style.setProperty(key1, value1);
CSS.registerProperty() // create new prop

访问 CSS 的 Angular 特定方式
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration

constructor(@Inject(DOCUMENT) private document: Document)

const ss = document.styleSheets[0] as CSSStyleSheet;
const rules = ss.cssRules[0] as CSSStyleRule;
console.log(rules.style.getPropertyValue('--grid-columns')); // get a prop value