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" 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元素选择器

解决方法

猜你在找的HTML相关文章