近期,@angular/cli 8.0 已经升级到了beta 5版本,在最新的版本里面增加了一个很有用的小特性:支持把SVG文件直接作为组件的模板来使用,就像这样:

0_1552303182015_1.png

有了以上特性之后,我们就可以在SVG标签里面使用Angular模板语法支持的所有特性,例如:指令、事件绑定等等。这样就大大扩展了SVG标签本身的表现力:

0_1552303313843_2.png

https://codesandbox.io/embed/vjq0w5jo2l

这个小特性也可以在 @angular/cli 之外使用,它是一个独立的webpack小插件@ngtools/webpack

当然,你也可以在.html模板内部使用SVG标签,同样能支持 Angular 模板引擎的所有特性:

0_1552303602100_3.png


本文由 @业余小编 意译改写,Medium 上的原文链接在这里:

https://medium.com/@oocx/using-svg-files-as-component-templates-with-angular-cli-ea58fe79b6c1

有关Angular的最新资源和咨询请参考这里:

http://www.ngfans.net