如何使用Agular打字稿

Question

我有一個角度的服務返回SVGElements，我想將它們納入一個模板，但我無法將它們插入模板添加SVGelement。我敢肯定，這是做但我所有的谷歌搜索和RTFM'ing，失敗了我一個普通的事情。

這裏有一個小例子（呼叫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剝離小號ome內容（見http://g.co/ng/security#xss）。「

Answer 1

您需要應用的消毒劑：

constructor(private sanitizer:DomSanitizer){} 

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

又見In RC.1 some styles can't be added using binding syntax