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

【问题标题】：Angular how to generate dynamically component without the selector tagAngular如何在没有选择器标签的情况下动态生成组件
【发布时间】：2020-01-30 00:41:31
【问题描述】：

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

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

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

这里是组件模板：

@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 标签。

【问题讨论】：

标签： html angular svg

【解决方案1】：

你不需要删除选择器，这只能使用 CSS 来修复，只需将 shape-tool 设置为 display: contents，

    shape-tool {
        display: contents;
    }

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

【讨论】：

【解决方案2】：

您可以使用动态组件加载器 使用动态组件加载器，您可以在运行时更改模板

用户链接

Angular-dynamic component loader

create components in Angular dynamically.

【讨论】：

【解决方案3】：

很难说出你想要做什么。要创建一个组件，只需这样做：

ng g component header

在 html 中：

<app-header></app-header>

【讨论】：