Как динамически вставлять svg в Angular2?

Question

[worksss]

Добрый день.
Хочется из компонента вставлять svg (забирать из базы)
https://plnkr.co/edit/lPAxCqhmHwBrotfw9Bgl?p=preview

Просто подстановка в template работает. А если делать через переменную
this.path = `<path d="m .... то нет. Но и не выдает ошибки. Что делать?
svg:path так же не решает

Answer 1

[Sasha Novik]

Тут нужно напрямую работать с DOM.

Создаем SVG из строки:

private svgElementFromString(str: string): SVGElement {
  const div = document.createElement('div');
  div.innerHTML = str;
  const svg = div.querySelector('svg') as SVGElement;
  return svg;
}

А потом инжектим в ноду:

const el = this.el.nativeElement;
el.innerHTML = '';
this.renderer.appendChild(el, svg);

Обновление:

Так же есть вариант с [innerHTML]:

<div [innerHTML]="svg">

Но нужно пропустить строку через санитайзер:

constructor(private sanitizer: DomSanitizer)
  ...
  this.svg = this.sanitizer.bypassSecurityTrustHtml(svgString);

Comments

[worksss]

Хм. Спасибо. Вот тебе и фреймворк

[worksss]

Огромное спасибо. Сделал через sanitizer