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

Question

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

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

不幸的是，由于 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 标签。

Answer 1

你不需要删除选择器，这可以只使用 CSS 来解决，只需将 shape-tool 设置为 display: contents,

    shape-tool {
        display: contents;
    }

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