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
});

我先尝试在xml上使用DOMParser，但后来我得到了一个字符串，上面写着[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';
}

另请参阅In RC.1 some styles can't be added using binding syntax，了解如何解决清理问题。

在Angular 2

1 个答案: