如何对动态数据使用ng-deep

问题描述

我需要为给定类动态定义字体大小，但是它们的值是从服务器获取的.静态看起来像这样:

  :: ng-deep .text-huge {字号:2.8em；} 

我该如何转换为动态分配的值?

  ::: ng-deep .text-huge {font-size:data.fontSize;} 

谢谢您的帮助

解决方案

您可以通过将动态 CSS 直接注入到< style> 元素中来添加.>

示例:

  data = {fontSize:'13px'};const textCss =`:: ng-deep .text-huge {字体大小:$ {data.fontSize}；}`document.getElementsByTagName('style')[0] .append(textCss); 

注意:上面的代码会将 CSS 添加到文档中的第一个样式元素

或者您可以创建样式元素，然后使用动态的 CSS 将其直接注入到组件中.

I need to dynamically define font-size sizes for a given class but the values they are taken from the server. statically it looks like this:

::ng-deep .text-huge {
   font-size: 2.8em; 
}

How can I convert this so that the assigned values are dynamic?

::ng-deep .text-huge {
   font-size: data.fontSize; 
}

Thank you for your help

解决方案

You can add dynamic CSS by injecting it into the <style> element directly.

Example :

data = { fontSize : '13px' };

const textCss = `::ng-deep .text-huge {
   font-size: ${data.fontSize}; 
}`

document.getElementsByTagName('style')[0].append(textCss);

NOTICE: The code above will add your CSS to the first style element in your document

Or you can create a style element and inject it directly to your component with your dynamic CSS.

这篇关于如何对动态数据使用ng-deep的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！