Angular - 如何清理简单打字稿类中的样式？

Question

我遇到了这个问题。现在

WARNING: sanitizing unsafe style value rotate(36.362868584929245deg)translate(91px,67px) (see http://g.co/ng/security#xss).

，一些研制后，我发现我不得不使用DomSanitizer应注入部件，像这样：

constructor(private sanitizer: DomSanitizer)

我的问题是，我的课需要卫生处理是一个简单的打字稿类，它不是一个组件。我如何注射杀菌剂？或者以其他方式清理这个值。

以下是相关代码：

模板：

<div class="transition" *ngFor="let transition of state.transitions" 
    [style.transform]="transition.transformPosition" 
    [style.width.px]="transition.width"></div> 

类：

export class Transition { 
    origin: State; 
    destination: State; 
    conditions: AlphabetSymbol[]; 

    constructor(origin: State, destination: State) { 
    this.origin = origin; 
    this.destination = destination; 
    } 

    get transformPosition() { 
    let x = (this.origin.layoutPosition.x + this.destination.layoutPosition.x)/2, 
     y = (this.origin.layoutPosition.y + this.destination.layoutPosition.y)/2, 
     angle = Math.atan( (this.destination.layoutPosition.y - this.origin.layoutPosition.y) 
         /(this.destination.layoutPosition.x - this.origin.layoutPosition.x)), 
     finalString; 

    x -= this.origin.layoutPosition.x; 
    y -= this.origin.layoutPosition.y; 
    angle *= 180/Math.PI; // Convert to degrees 
    finalString = "rotate(" + angle + "deg)translate(" + x + "px," + y + "px)";   

    return finalString;        
    } 

    get width() { 
    return this.origin.layoutPosition.distanceTo(this.destination.layoutPosition) - 60; 
    } 
} 

仅供参考，如果我回到平原 “改造” 的值，只需翻译或只是一个旋转，它接受字符串，但将它们组合标记为不安全。

Answer 1

我设法通过在模板的父组件中定义的函数内包装不安全的样式来解决这个问题。

模板

<div class="transition" *ngFor="let transition of state.transitions" 
    [style.transform]="sanitizeStyle(transition.transformPosition)" 
    [style.width.px]="transition.width"></div> 

模板的父（组件）

constructor(private sanitizer: DomSanitizer) 
... 
sanitizeStyle(unsafeStyle: string): SafeStyle { 
    return this.sanitizer.bypassSecurityTrustStyle(unsafeStyle); 
}