Вставьте XML в DOM в Angular 2

Question

Я довольно новичок в Angular 2, и мне действительно трудно понять, как добавить XML в мой HTML-шаблон. Я хотел бы условно вставить определенные наборы XML в мой шаблон, из которого внешняя библиотека отображает некоторые SVG. У меня есть наборы XML в виде строк js, которые я пытаюсь вставить в свой шаблон.

ОБНОВИТЬ:

У меня есть XML-код в виде строки, которую я хотел бы отобразить в шаблоне.

Псевдо-код:

const xml = 'valid xml string';

в компоненте:

@Component({
  selector: "toolbox",
  template: `{{xml}}` <-- gives me xml as a string into DOM
});

Сначала я пытался использовать DOMParser в xml, но потом я просто получаю строку с надписью [object XMLDocument]. Я пытался сделать это таким образом, чтобы я мог изменить xml на основе пользовательского ввода, прежде чем просто вставил XML в шаблон. Возможно, есть способ динамически менять шаблоны компонентов?

ОБНОВЛЕНИЕ РЕШЕНО

Используя DomSanitizationService и [outerHTML], я смог правильно вывести свою строку XML в DOM.

Псевдо-код:

import { DomSanitizationService, SafeHtml } from '@angular/platform-browser';

@Component({
...

  template: `<div [outerHTML]="xml"></div>`

...
})

export class MyClass {

  xml: SafeHtml;

  constructor(sanitizer: DomSanitizationService){
    this.xml = sanitizer.bypassSecurityTrustHtml('my valid xml string');
  }

...

}

Answer 1

@Component({
  selector: "toolbox",
  template: `<div [innerHTML]="xml"></div>`
})
class MyComponent {
  xml = 'someXmlString';
}

См. Также В RC.1 некоторые стили не могут быть добавлены с использованием синтаксиса привязки о том, как исправить проблемы с очисткой.