时间戳

首页 > 解决方案 > Angular如何在没有选择器标签的情况下动态生成组件

html - Angular如何在没有选择器标签的情况下动态生成组件

问题描述

我正在努力在没有组件标签的情况下动态生成组件。基本上我有一个包含 svg 图片的主要组件。

我正在尝试编写一个组件，女巫将在该标签 svg 内生成矩形。我尝试按照动态组件的角度教程进行操作，但这是生成组件时得到的结果：

不幸的是，由于 ng-component，没有显示任何内容。

这是组件模板：

@Component({
  selector: '',
  template: ``<svg:rect width="1000px" height="1000px" fill="white">``,
  styleUrls: ['./shape-tool.component.scss']
})

这是我的主要组件 html ：

<div class="main">
    <svg #svg version="1.1" baseProfile="full" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <ng-template svgDynamic></ng-template>
    </svg>
</div>

当用户单击主组件时，我只希望矩形标签进入 svg 标签。

标签： htmlangularsvg

解决方案

您不需要删除选择器，这可以仅使用 CSS 修复，只需设置shape-tool为display: contents,

    shape-tool {
        display: contents;
    }

如display: contents 文档中所述，这会导致组件看起来好像是元素父级的直接子级。这样就不需要删除它了。

推荐阅读