在角度2組件中創建動態HTML標記

Question

我需要在我的組件中創建一個SVG標記。在SVG中，我想創建未知數量的多邊形組件，如多邊形，圓形，矩形等等。 所以，我有存儲在陣列像數據：被隨機創建

polygons = [ 
    { 
     type: 'polygon', 
     points: "30,0 0,60 60,60" 
    },{ 
     type: 'circle', 
     x: 30, 
     y: 30, 
     r: 30 
    } 
    ... 
] 

這個數組，它可能有數以千計的多邊形。 那麼我們怎樣才能做到這一點在角2？在作出反應時，它很直接，但它似乎有點棘手。

還有一個問題，SVG標籤在Angular中的處理方式不同嗎？或者像對待所有其他HTML標籤一樣對待它們？

任何幫助將不勝感激...

Answer 1

有不同的方法來做到這一點（ngIf，ngSwitch，ngTemplateOutlet，ngComponentOutlet，...），但我會用下面的技巧

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> 
    <ng-container *ngFor="let item of polygons"> 
     { 
     item.type, 
     yurzui, 
     polygon { <svg:polygon [attr.points]="item.points"/> } 
     circle { <svg:circle [attr.cx]="item.x" [attr.cy]="item.y" [attr.r]="item.r"/>/> } 
     } 
    </ng-container> 
</svg> 

Plunker Example

是SVG標籤中區別對待角？或者像所有其他HTML標籤一樣對待 ？

我覺得他們像所有其他的HTML標記對待，但他們應該是內部svg標籤直接否則，我們在我的例子中使用的命名空間像<svg:circle