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

发布时间：2020-12-14 21:36:37 所属栏目：资源来源：网络整理

导读：在角度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 !--templ

在角度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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!