Angular 2 从组件设置动态样式（背景图片：线性渐变）

Question

我正在使用 angular2 rc2 和打字稿。我有一个 angular 2 组件，其中颜色是使用属性设置的。

在组件内部，颜色被转换为 rgba 并创建了线性渐变，我想将其设置为模板。

import { Component, Input, OnInit } from "@angular/core";

@Component({
      selector: "horizontalrule",
      template : `<div class="fadding-ruller-holder">
                        <hr class="fadding-ruller" [style.background-image]="BackgroundImage">
                  </div>`,
})

export class HorizontalRule implements OnInit
{
      @Input() color:string;

      public BackgroundImage:string;

      constructor(private utils:UtilsService) 
      {

      }

      ngOnInit()
      {
            //color: #FF0000

            let rgba:string = this.ConvertHexToRGBA(this.color, 0.7);

            //rgba: rgba(255,0,0,0.7)

            this.BackgroundImage = "-webkit-linear-gradient(left, rgba(0, 0, 0, 0)," + rgba + "rgba(0, 0, 0, 0))"
                                    + "-o-linear-gradient(left, rgba(0, 0, 0, 0),"   + rgba + "rgba(0, 0, 0, 0))"
                                    + "linear-gradient(to right, rgba(0, 0, 0, 0),"  + rgba + "rgba(0, 0, 0, 0))";
      }

      public ConvertHexToRGBA(hex:string, opacity?:number):string
      {
            opacity = opacity || 1;

            opacity < 0 ? opacity = 0 : opacity = opacity;
            opacity > 1 ? opacity = 1 : opacity = opacity;

            hex = hex.replace('#','');

            let r = parseInt(hex.substring(0, 2), 16);
            let g = parseInt(hex.substring(2, 4), 16);
            let b = parseInt(hex.substring(4, 6), 16);

            return 'rgba(' + r + ',' + g + ',' + b + ',' + opacity +')';

      }
}

这是行不通的。出现问题，html 中甚至没有设置渐变。这是正确的做法吗？

Answer 1

import {DomSanitizationService} from '@angular/platform-browser';

class HorizontalRule implements OnInit {
  transform(style) {
    return this.sanitizer.bypassSecurityTrustStyle(style);
  }

  ngOnInit() {
        //color: #FF0000

        let rgba:string = this.transform(this.ConvertHexToRGBA(this.color, 0.7));

        //rgba: rgba(255,0,0,0.7)

        this.BackgroundImage = this.transform("-webkit-linear-gradient(left, rgba(0, 0, 0, 0)," + rgba + "rgba(0, 0, 0, 0))"
                                + "-o-linear-gradient(left, rgba(0, 0, 0, 0),"   + rgba + "rgba(0, 0, 0, 0))"
                                + "linear-gradient(to right, rgba(0, 0, 0, 0),"  + rgba + "rgba(0, 0, 0, 0))";)
  }
}

Angular 2 从组件设置动态样式（背景图片：线性渐变）

Angular 2 set dynamic styles from component (background image: linear gradient)

css

components

styles

typescript

angular