svg – 删除由角度组件创建的主机HTML元素选择器

概述在角度2中，svg-rect是像下面这样创建rect的组件， <svg height="550" width="450" x="0" y="0"> <g id="svgGroup"> <svg-rect> <!--template bindings={}--> <rect x="10" y="10" height="100" widt 在角度2中，svg-rect是像下面这样创建rect的组件，

<svg height="550" wIDth="450" x="0" y="0">    <g ID="svgGroup">        <svg-rect>        <!--template bindings={}-->            <rect x="10" y="10" height="100" wIDth="100" fill="red" stroke="#000" stroke-wIDth="2"></rect>        <!--template bindings={}-->        </svg-rect>        <svg-rect>        <!--template bindings={}-->            <rect x="10" y="10" height="100" wIDth="100" fill="red" stroke="#000" stroke-wIDth="2"></rect>        <!--template bindings={}-->        </svg-rect>    </g></svg>

但是由于创建了特殊元素标签，因此不会导致rect。如果删除svg-rect标签，则会呈现rect

<svg height="550" wIDth="450" x="0" y="0">    <g ID="svgGroup">        <!--template bindings={}-->        <rect x="10" y="10" height="100" wIDth="100" fill="red" stroke="#000" stroke-wIDth="2"></rect>        <!--template bindings={}-->        <!--template bindings={}-->        <rect x="10" y="10" height="100" wIDth="100" fill="red" stroke="#000" stroke-wIDth="2"></rect>        <!--template bindings={}-->    </g></svg>

在Angular 1.x中，替换为“true”，它使用编译的输出删除指令标签。我们可以在angular2中实现相同吗？

解决方法 而不是试图摆脱主机元素，将其转换为有效的SVG，但其他明智的不受影响：而不是您的元素选择器

selector: "svg-rect"

及其在模板中的相应元素：

template: `...<svg-rect>...</svg-rect>...`

切换到属性选择器：

selector: "[svg-rect]"

并将该属性添加到组元素标签中：

template: `...<g svg-rect>...</g>...`

这将扩展到：

<svg height="550" wIDth="450" x="0" y="0">    <g ID="svgGroup">        <g svg-rect>        <!--template bindings={}-->            <rect x="10" y="10" height="100" wIDth="100" fill="red" stroke="#000" stroke-wIDth="2"></rect>        <!--template bindings={}-->        </g>        <g svg-rect>        <!--template bindings={}-->            <rect x="10" y="10" height="100" wIDth="100" fill="red" stroke="#000" stroke-wIDth="2"></rect>        <!--template bindings={}-->        </g>    </g></svg>

这是有效的SVG，它将呈现。
Plnkr

总结

以上是内存溢出为你收集整理的svg – 删除由角度组件创建的主机HTML元素选择器全部内容，希望文章能够帮你解决svg – 删除由角度组件创建的主机HTML元素选择器所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。