基于变量angular生成动态css

新手上路,请多包涵

我正在开发一个使用 angular 4 开发的管理面板,并尝试集成一个部分来自定义样式,如更改颜色、bg 等。我已经开发了一个部分来将设置保存在数据库中,让它们在应用程序加载时使用 API 作为 json。

现在我正在尝试使用来自 json 的值生成动态 css,我尝试在主要组件中使用以下代码,但它不起作用

@Component({
      templateUrl: 'card.html',
      styles: [`
        .card {
          height: 70px;
          width: 100px;
          color: {{css.cardColor}};
        }
      `],
})

我不确定我应该如何在组件中加载 css 值并在样式标签中使用它们。我没有找到任何其他解决方案。

另一种方法是使用角度动画概念,但 css 将是巨大的,并且不可能使用触发器和所有的角度动画来实现它。我相信有一个解决方案,因为这似乎是一个真正的要求,应该由许多其他开发人员完成。

任何帮助都是可观的。

编辑:不能使用 ngStyle 因为它将应用于几乎所有元素,因为它适用于整个应用程序,而不仅仅是特定元素。

原文由 Vikram 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 938
2 个回答

Angular 中可用的直接方法是使用 ngstyle,如下所示

<div [ngStyle]="{'color': style.colorVal ? style.colorVal : '#000', 'font-size' : style.fontSize ? style.fontSize : '16px' }"></div>

在经历了不同的方法并试图将动态 CSS 添加到 Angular 应用程序的所有页面之后,我最终得到了以下解决方案。

要求:根据返回的值和 API 生成动态 css 以更改设计和样式。

解决方案 :

  1. 创建一个新组件并创建一个服务来从 API 加载动态 css 变量。
  2. 在模板文件中添加样式标签并为属性使用变量值。
  3. 在所有页面或主模板上加载此模板。
  4. 在应用程序构建样式将移动到 head 标签。

代码示例

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){
        /* call the service/api to get the css variable values in cssVariables */

    }
}

现在使用 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);
}

它使用 jquery,但如果您不想在 Angular 应用程序中使用 jquery,也可以使用 javascript/typescript 来完成

其他有用的资源 https://github.com/angular/angular/issues/9343#issuecomment-312035896

原文由 Vikram 发布,翻译遵循 CC BY-SA 4.0 许可协议

对于后台使用,颜色使用 JSON 方法:

 <ion-list-header class="background-size"
[ngStyle]="{'background-image': 'url(' + data.headerImage + ')'}"
*ngIf="data.headerImage != null">

原文由 Fahimeh Ahmadi 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏