Angular 2 - 在SVG上消毒轉換

Question

在mousemove上我想更改我的SVG元素的轉換，但這是mot應用，我得到以下警告： 「警告：消毒不安全的樣式值」 我怎樣才能得到這個風格被應用？

我-component.js：

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'my-component', 
    templateUrl: 'my-component.html' 
}) 

export class MyComponent{ 
@HostListener('document:mousemove', ['$event']) 
    onMouseMove(ev:MouseEvent) { 

    this.mouseX = ev.clientX; 
    this.mouseY = ev.clientY; 

    for(var i = 0; i < this.lines.length - 1; i++) 
    { 
    var weight = this.lines[i].weight; 

    var translateX = Math.round(((this.mouseX - this.halfWidth) * weight)/7); 
    var translateY = Math.round(((this.mouseY - this.halfHeight) * weight)/7); 

    this.lines[i].translateX = translateX; 
    this.lines[i].translateY = translateY; 
    } 
    } 


    lines: [ 
    { translateX: 0.0, translateY: 0.0, weight: 0.40, x1: 86.69, y1: 1, x2: 98.91, y2: 1 }, 
    { translateX: 0.0, translateY: 0.0, weight: 0.40, x1: 85.31, y1: 9.67, x2: 98.23, y2: 9.67 } 
    ] 
} 

我組分-HTML：

<svg id="lines" viewBox="0 0 320.6 542.59"> 
    <line *ngFor="let line of lines" [attr.style]="{'transform': 'translate('+line.translateX+'px, ' + line.translateY+'px)'}" class="line" [attr.x1]="line.x1" [attr.y1]="line.y1" [attr.x2]="line.x2" [attr.y2]="line.y2"/> 
</svg> 

Answer 1

嘗試使用DomSanitizer：

import { Pipe, PipeTransform } from '@angular/core'; 
import { DomSanitizer} from '@angular/platform-browser'; 

@Pipe({ name: 'safe' }) 
export class SafePipe implements PipeTransform { 
    constructor(private sanitizer: DomSanitizer) {} 
    transform(style) { 
     return this.sanitizer.bypassSecurityTrustStyle(style); 
    } 
} 

你的HTML可能是這樣的：

[style.transform]="'translate('+line.translateX+'px, ' + line.translateY+'px)' | safe" 

我不知道你想要做什麼，但這裏是Plunker Example

另外不要忘記添加SafePipe到declaration陣列@NgModule元