如何解决如何在Angular组件中设置:: before伪元素的CSS属性?
是否可以在Angular组件的SCSS代码中访问TypeScript变量?
我想做这样的事情:
<style type="text/css">
.source-status-{{ event.status.id }}::before {
border-left: 20px solid {{ event.status.color }};
}
</style>
<div class="source-status-{{ event.status.id }}">
...
</div>
是否可以在Angular组件中设置::before
伪元素的CSS属性?
解决方法
我认为这是不可能的,因为在构建应用程序时,SCSS会被编译为CSS,因此不会有任何动态值。
您可以尝试使用CSS变量,但是应该更改创建类名的方式。
您可以将变量添加到组件的样式属性中,例如:
@HostBinding('attr.style')
public get cssVariables(): SafeStyle {
LOGIC TO DEFINE VARIABLE VALUE
const cssVariables = `
--my-variable: value
`;
return this.sanitizer.bypassSecurityTrustStyle(cssVariables);
}
在您的SCSS文件中,您可以使用以下变量:
.source-status-{{--you-should-think-of-static-class-names--}}::before {
border-left: 20px solid var(--my-variable);
}
,
我找到了解决方法。这不是一个好方法,但是它可以正常工作。
在.ts
文件中:
html = '.' + event.status.id + '::after { border-left-color:' + event.status.color + ' !important; } ';
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = html;
document.getElementsByTagName('head')[0].appendChild(style);
然后在HTML文件中:
<div class="color-{{ event.status.id }}">
...
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。