Angular2 - 具有 ng 风格的 SVG答案

【问题标题】：Angular2 - SVG with ng-styleAngular2 - 具有 ng 风格的 SVG
【发布时间】：2017-09-23 01:30:48
【问题描述】：

我正在使用 ng-repeat 绘制 SVG 线条，并希望更改每一行的翻译。但是使用 ng-attr-style 我无法应用样式。

我的组件.js：

import {Component} from 'angular2/core';

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

export class MyComponent{
  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" ng-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>

这是我在检查 dom 中的元素时看到的：

<line _ngcontent-ssx-9="" class="line" ng-attr-style="{'transform': 'translate('+line.translateX+'px, ' + line.translateY+'px)'}" x1="189.1" y1="226.41" x2="212.06" y2="226.41"></line>

【问题讨论】：

标签： javascript angularjs typescript svg

【解决方案1】：

ng-attr-* 被 Angular 1 使用，你应该使用 [attr.style](属性绑定)

[attr.style]="{'transform': 'translate('+line.translateX+'px, ' + line.translateY+'px)'}"

【讨论】：

似乎工作正常，谢谢。但是我在控制台中收到以下消息：WARNING: sanitizing unsafe style value