Question

我最近开始使用web dev。特别是角度2。我必须说这个框架太棒了！

但我有一个挑战，我无法弄清楚如何以最佳方式解决：

我想用angular2（数据模型，常用服务等）构建我的网络应用程序。但对于“主要区域屏幕”模板，我想在svg中设计，使用wysiwyg绘制静态线条和圆形等。然后我想将所有不同的角度组件嵌入到这些“主区域屏幕”svg页面中。这是因为我们的布局不是典型的网格样式，并且需要将不同的组件置于staic svg背景上的“像素精度”上。

我在网上搜索了不同的方法，但似乎没有什么可以解决我的挑战。

是否可以在svg中嵌入angular2组件，然后将svg添加到角度模板中？

Answer 1

如果您为SVG组使用属性选择器，它将起作用，但我似乎无法将该组件作为您正在寻找的自定义元素语法.SVG没有阴影DOM

例如，这很好用：

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
var customClient:Object = new Object();
ns.client = customClient;
ns.play("http://streamserver3.us:7018/stream?type=.flv");

Answer 2

是的，可以将svg添加为angular 2组件：

你可以试试这个。

定义您的圈子组件

@Component({
    selector: 'g[circle]',
    templateUrl: './circle.component.html',
    styleUrls: ['./circle.component.scss']
})

circle.component.hmtl：

<svg:circle
            [attr.cx]="circle?.x" 
            [attr.cy]="circle?.y" 
            [attr.r]="radius" 

            [attr.fill]="circle?.fill"
             />

你的root html就像

<svg>
<g circle *ngFor="let circle of circles" 
                    [attr.fill-opacity]="opacity" 
                    [attr.transform]="scale" 
                    [circle]="circle"
                     />
</svg>

类似地，您可以通过使用选择器创建类似的组件来使用所有其他svg形状。

您可以使用此库提供所有svg元素

https://www.npmjs.com/package/angular-svg

在Svg

2 个答案: