删除由 angular 组件创建的宿主 HTML 元素选择器 [英] Remove the host HTML element selectors created by angular component

问题描述

在 angular 2 中，svg-rect 是一个创建 rect 的组件，如下所示，

In angular 2, svg-rect is a component which creates rect like below,

<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

but this won't render rect because of the special element tags created. If svg-rect tags are removed it renders the 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 中，有 replace: 'true' 它会删除带有编译输出的指令标签.我们可以在 angular2 中实现相同的吗?

In Angular 1.x, there is replace: 'true' which removes the directive tags with the compiled output. Can we implement the same in angular2?

推荐答案

与其试图摆脱宿主元素，不如将其转换为一个有效的 SVG 但其他方面不受影响的元素:而不是你的 元素选择器

Instead of trying to get rid of the host element, turn it into one that is valid SVG but other wise unaffecting: Instead of your element selector

selector: "svg-rect"

及其在模板中的对应元素:

and its corresponding element in the template:

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

切换到属性选择器:

selector: "[svg-rect]"

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

and add that attribute to a group element tag:

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

which is valid SVG, which will render. Plnkr

这篇关于删除由 angular 组件创建的宿主 HTML 元素选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！