Erstellen Sie dynamische HTML-Tags in Winkel 2 Komponente

Question

Ich muss ein SVG-Tag in meiner Komponente erstellen. In diesem SVG möchte ich eine unbekannte Anzahl von Polygon-Komponenten erstellen, wie Polygone, Kreise, Rechtecke und so weiter. Also, ich habe die in Array gespeicherten Daten wie:

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

Dieses Array zufällig erstellt wird, und es Tausende von Polygonen haben könnte. Also wie können wir das in Winkel 2 tun? In Reaktion war es geradlinig, aber es scheint in eckig ist es etwas schwierig.

Und noch eine Frage, sind SVG-Tags in Angular anders behandelt? oder sie werden wie alle anderen HTML-Tags behandelt?

Jede Hilfe wird geschätzt werden ...

Answer 1

Es gibt verschiedene Möglichkeiten (ngSwitchngIf, ngTemplateOutlet, ngComponentOutlet, ...), das zu tun, aber ich würde den folgenden Trick

<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> 

verwenden

Plunker Example

sind SVG-Tags werden nicht anders behandelt in Eckig? oder sie werden wie alle anderen HTML-Tags behandelt ?

Ich denke, sie wie alle anderen HTML-Tags behandelt werden, aber sie sollten direkt sonst innerhalb svg Tages sind wir Namespace wie in meinem Beispiel <svg:circle