Angular 2：通过UI上的用户输入/事件动态控制SVG图像/图标Css样式

我使用Jquery在Angular 2中动态控制svg图像的Css样式。

1：使用鼠标hover等事件进行控制

下面是一个简单的圆圈.svg图像的示例代码，其中定义了初始样式，并且圆圈上的鼠标hover事件将在hover圆圈时触发“func1”：

  .st0{ fill:#FFFFFF; stroke:#000000; stroke-width:4; stroke-miterlimit:10; }   

现在定义此函数：func1（）在其相应的组件（.ts文件）中，其中包含要使用jquery更改的样式。 它看起来像这样：

 func1(){ console.log("func1 has been called!"); $(".st0").css({"stroke":"yellow", "fill": "blue"}); } 

尝试探索其他事件（如“点击”）。

2.通过表格输入进行控制

如果要使用表单输入更改svg的样式，则应使用动态绑定。 在模板中示例附加代码（以及之前的svg代码）：

 
 Stroke Fill Submit  

代码需要添加到相应的组件（.ts文件）中：

 stroke:any; fill:any; submit(){ console.log("submit called!"+ this.stroke+" and "+ this.fill); $(".st0").css({"stroke":this.stroke, "fill": this.fill}); } 

Answer 1

只需使用ngStyle指令即可

只需使用ngStyle指令即可

尽量避免在Angular2中使用jQuery。