Question

我需要在我的组件中创建一个SVG标记。在SVG中，我想创建未知数量的多边形组件，如多边形，圆形，矩形等。所以，我将数据存储在数组中，如：

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

这个数组是随机创建的，它可能有数千个多边形。那么我们怎样才能在角度2中做到这一点？作为反应，它是直接的，但它似乎有点棘手。

还有一个问题，在Angular中SVG标签的处理方式有所不同吗？或者它们被视为与所有其他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

在Angular中，SVG标签是否有不同的处理方式？或者他们受到了待遇像所有其他HTML标签一样？

我认为它们被视为与所有其他HTML标记一样，但它们应该直接位于svg标记内，否则我们必须使用命名空间，例如我的示例<svg:circle

在角度2组件中创建动态HTML标记

1 个答案: