Как добавить SVGelement с помощью Angular TypeScript

У меня есть служба Angular, которая возвращает SVGElements, а я ' Я хочу включить их в шаблон, но мне не удается вставить их в шаблон. Я уверен, что это обычное дело, но все мои поиски в Google и 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). "


svg angular angular-directive
person Jthorpe    schedule 19.03.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Наносить дезинфицирующее средство нужно:

constructor(private sanitizer:DomSanitizer){}

var circle_elt = this.sanitizer.bypassSecurityTrustHtml(
    parser.parseFromString(svg_string, "image/svg+xml").childNodes[0]
);

См. Также В RC.1 некоторые стили нельзя добавить с помощью синтаксиса привязки

person Günter Zöchbauer    schedule 19.03.2017