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

问题描述

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

在角1.x中，有的代替：真正的的这消除编译输出指令的标签。我们可以实现相同的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.

推荐答案

要引用的角1角至2升级战略DOC ：

指令替换了其主机元素（替换：在1角真指令）。在角2不支持在许多情况下，这些指令可以升级到常规组件指令

Directives that replace their host element (replace: true directives in Angular 1) are not supported in Angular 2. In many cases these directives can be upgraded over to regular component directives.

有定期时组件指令行不通的，在这种情况下的替代方法可以使用​​的情况。例如，对于SVG参考： https://github.com/mhevery/ng2-svg

There are cases when regular component directives are not going to work, in those cases alternative approaches can be used. For example for svg see: https://github.com/mhevery/ng2-svg

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