垫输入的动态加载颜色
Dynamic load color for mat-input
我得到了以下系统。
我们有一个后端系统,它从另一个系统获取输入以设置我们的 angular 应用程序。
因此,对于每个模块,我们加载不同的颜色来设计我们的应用程序。
模块 1 = 红色。
模块 2 = 蓝色。
我们正在寻找的是颜色的动态变化,因为它可以随时更改。
我见过的大多数解决方案都是硬编码的 css 但这不起作用。
我们尝试过的是:
<mat-form-field floatLabel="always" color="primary">
<input #input matInput [ngStyle]="{'color': color }" />
</mat-form-field>
我们尝试调整主色板或使用 ngStyle 设置颜色,但都没有成功。
我认为您可以使用“ngClass”代替 ngStyle。你可以参考 angular 文档来了解它的实现。我希望它有所帮助。官方文档 here
经过更多挖掘。
几个小时后我找到了这个答案。
这需要您使用第三方:https://github.com/johannesjo/angular-material-css-vars
它的作用是覆盖 Angular 材料的主要托盘、重音托盘或警告托盘。我也确实在设置颜色的最高 lvl 上应用了它,否则它会产生过载。
我得到了以下系统。 我们有一个后端系统,它从另一个系统获取输入以设置我们的 angular 应用程序。
因此,对于每个模块,我们加载不同的颜色来设计我们的应用程序。 模块 1 = 红色。 模块 2 = 蓝色。
我们正在寻找的是颜色的动态变化,因为它可以随时更改。 我见过的大多数解决方案都是硬编码的 css 但这不起作用。
我们尝试过的是:
<mat-form-field floatLabel="always" color="primary">
<input #input matInput [ngStyle]="{'color': color }" />
</mat-form-field>
我们尝试调整主色板或使用 ngStyle 设置颜色,但都没有成功。
我认为您可以使用“ngClass”代替 ngStyle。你可以参考 angular 文档来了解它的实现。我希望它有所帮助。官方文档 here
经过更多挖掘。 几个小时后我找到了这个答案。
这需要您使用第三方:https://github.com/johannesjo/angular-material-css-vars
它的作用是覆盖 Angular 材料的主要托盘、重音托盘或警告托盘。我也确实在设置颜色的最高 lvl 上应用了它,否则它会产生过载。