我正在使用angular2 rc2和打字稿。 我有一个角度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中设置渐变。这是正确的方法吗?
答案 0 :(得分:3)
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))";)
}
}