在角度模板的样式标签中使用变量？

Posted 2023-03-05

【中文标题】在角度模板的样式标签中使用变量？

【英文标题】：Use variable in style tag in angular template?

【发布时间】：2018-09-02 03:15:33

【问题描述】：

我正在开发 Angular 5 应用程序，并且我需要在模板的样式标记中应用动态 css。 我尝试了一些解决方案，但它们都不起作用。

app.component.ts

customCss : any;

constructor()

ngOnInit()
   this.customCss['color'] = "red";

app.component.html

<div>
   <span class="custom_css">This is angular 5 application</span>
</div>

<style>
   .custom_css
      color: customCss.color;
   
</style>

当我在浏览器中检查 custom_css 类时，它会显示样式

.custom_css
   color: customCss.color;

感谢任何帮助。

【问题讨论】：

看看这个***.com/a/46536494/112104

它适用于所有其他情况，但不适用于 css 部分。

我不认为这个 Angular 允许你在模板中使用 style。但是创建动态元素很容易。

【参考方案1】：

你可以使用[ngStyle]指令：

<span [ngStyle]="'color': 'red'">
 This is angular 5 application
</span>

或者像这样：

<span [ngStyle]="applyStyles()">
 This is angular 5 application
</span>

在组件中：

applyStyles() 
    const styles = 'color' : 'red';
    return styles;

【参考方案2】：

您可以使用 [style.customClass]=“methodInComponent()”...

如果组件中的方法返回 true，这将应用该类。

【参考方案3】：

如果您在给定组件中几乎没有要更改的元素，如果您需要根据用户的选择（并且在运行中）更改应用程序的完整整体外观和感觉，那么给定的答案有效，这是我发现的唯一方法far 是在 javascript 中覆盖 css，如下所示：

this.stylesService.get().subscribe(( customStyles ) => 
     const style = document.createElement('style');
     style.innerHTML = 
     `.picture 
         background-image: url($customStyles.backgroundUrl);
     
     h1, h2 
         color: $customStyles.primaryColor;
     `;

     document.body.appendChild(style);
);

【参考方案4】：

顺便说一句，如果你这样设置颜色：

<div [style.color]="color"></div>

color='var(--cssValue)' 在哪里行不通！

但是，这可以正常工作：

<div [ngStyle]="color: color"></div>

【讨论】：

但是你可以像 <div [style.color]="'var(--poop)'">poop</div> 这样在你定义了 :host --poop: brown; 的地方使用 var()。您通常不想这样做，但您可以这样做。