Question

我有一个返回SVGElements的Angular服务，我想将它们包含在模板中，但是我将它们插入模板时遇到了麻烦。我确信这是常见的事情，但我的谷歌搜索和RTFM都失败了。

这是一个最小的例子（当然，在调用ng init之后）：

[app.component.html]
<h1>
  {{title}}
  <div [innerHTML]="circle"></div>
  <div [innerHTML]=circle.outerHTML></div>
  <div >{{circle}}</div>
  <div >{{circle.outerHTML}}</div>
</h1>

，

[app.componoent.ts]
import { Component } from '@angular/core';

// create an SVGElement
var svg_string  = '<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>'
var parser = new DOMParser();
var circle_elt = parser.parseFromString(svg_string, "image/svg+xml").childNodes[0];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  circle = circle_elt;
}

我得到的是一个显示文字的网页：

app works!
[object SVGSVGElement]
[object SVGSVGElement]
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/> </svg>

在控制台中，有消息说明：

“警告：清理HTML会删除一些内容（请参阅http://g.co/ng/security#xss）。”

Answer 1

您需要应用消毒剂：

ruamel.yaml

另见In RC.1 some styles can't be added using binding syntax

如何使用Angular TypeScript

1 个答案: