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

在1.x、 有replace: 'true'个命令用于删除编译输出中的指令标记.我们能在angular2中实现同样的功能吗?

推荐答案

与其试图go 掉宿主元素,不如将其转换为有效的SVG,否则不会有任何影响:而不是您的element selector

selector: "svg-rect"

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

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

切换到attribute selector:

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

Angular相关问答推荐

Angular - MSAL用户缺少角色

在forkjoin中使用NGXS状态数据

to Signal on Observables inside Signal

为什么当我在父组件中设置数组元素时,Angular重新创建子组件而不是更新它?

有没有一种方法用timeout()操作符创建计数器,用于超时一个观察对象?

Angular 服务错误处理响应类型=BLOB

命令不起作用的初始菜单项

判断哪个Angular 信号导致了影响

如何将 Firebase 云消息传递 (FCM) 与 Angular 15 结合使用?

根据环境变量动态加载Angular templateUrl

Angular Http 拦截器 - 修改标头会导致 CORS

如何重置表单中的特定字段?

在更改检测之前调用创建的间谍

Angular:ViewChild 上未定义 nativeElement

在 Angular rxjs 中,我什么时候应该使用 `pipe` 与 `map`

Angular 2 setinterval() 继续在其他组件上运行

Angular CLI 输出 - 如何分析Bundle 文件

单元测试错误:无法从同步测试中调用 Promise.then

IE11中的Angular4应用程序运行问题

如何在 Angular CLI 6: angular.json 中添加 Sass 编译?