在 Angular 中可用的直接方法是使用 ngStyle,示例如下:
<div [ngStyle]="{'color': style.colorVal ? style.colorVal : '#000', 'font-size' : style.fontSize ? style.fontSize : '16px' }"></div>
在尝试了不同的方法和途径来将动态CSS添加到 Angular 应用程序的所有页面之后,我得出了以下解决方案。
要求:根据从 API 返回的值生成动态 CSS 以更改设计和样式。
解决方案:
- 创建一个新组件并创建一个服务来从 API 加载动态 CSS 变量。
- 在模板文件中添加样式标签,并使用变量值设置属性。
- 在所有页面或主模板上加载此模板。
- 在应用程序构建时,样式将被移动到头部标记。
代码示例
import { CssService} from './Css.service';
@Component({
selector: 'DynamicCss',
templateUrl: './DynamicCss.component.html',
styleUrls: ['./DynamicCss.component.scss']
})
export class ServiceProviderComponent implements OnInit {
cssVariables: any;
constructor(private cssService:CssService){
}
}
现在使用 jQuery 或 JavaScript 应用 CSS,通过以下函数追加 CSS。
appendCss(customData)
{
let text = '.custom-form-1 {
background-image: url("`+customData.background_image+`");
}';
$(document).ready(function(){
$("style").append(text);
});
}
加载自定义数据后,可以像我在ngOnInit
中所做的那样调用此函数。
ngOnInit(){
this.appendCss(this.customizeFormData);
}
如果您不想在Angular应用中使用jQuery,也可以使用JavaScript / TypeScript来完成此操作。
其他有用的资源:https://github.com/angular/angular/issues/9343#issuecomment-312035896