移除 Angular 组件创建的宿主 HTML 元素选择器答案

【解决方案1】：

与其尝试摆脱宿主元素，不如将其转换为有效的 SVG 但在其他方面不受影响：而不是您的 元素选择器

selector: "svg-rect"

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

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

切换到属性选择器：

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

【讨论】：

这适用于任何需要有效元素的地方，我刚刚将它用于出现相同问题的表头的小组件。但是，有一个查询，您可以为此链接到任何文档吗？
@David - 你不会在手册中找到它（还），但向你保证它是有福的：这是用户提出有时（svg 和表格）你需要的情况的线程使用属性选择器来修改结构：github.com/angular/angular/issues/11280。作为回应，在此处添加了功能（实际上是恢复了）：github.com/angular/angular/pull/11808。
但是如果我想在一个元素中添加多个元素怎么办（手动，而不是 *ngFor）
如何向属性选择器添加属性？

【解决方案2】：

另一种删除我使用的组件主机的方法。

指令remove-host

//remove the host of avatar to be rendered as svg
@Directive({
    selector: '[remove-host]'
})
class RemoveHost {
    constructor(private el: ElementRef) {
    }

    //wait for the component to render completely
    ngOnInit() {
        var nativeElement: HTMLElement = this.el.nativeElement,
            parentElement: HTMLElement = nativeElement.parentElement;
        // move all children out of the element
        while (nativeElement.firstChild) {
            parentElement.insertBefore(nativeElement.firstChild, nativeElement);
        }
        // remove the empty element(the host)
        parentElement.removeChild(nativeElement);
    }
}

使用该指令；
<avatar [name]="hero.name" remove-host></avatar>

在remove-host 指令中，nativeElement 的所有子元素都插入到宿主之前，然后移除宿主元素。

Sample Example Gist
根据用例，可能存在一些性能问题。

【讨论】：

可能是性能问题，这是我最初的想法。但是目前在我的材料设计轻组件中使用这种方式来替换宿主元素，否则会出现显示 html 的问题
@Kuncevich 很高兴知道我的回答有所帮助，当元素 ChangeDetection 被触发为 shadow DOM !== actual DOM 时，会产生性能瓶颈。但是如果没有很多元素，那么这不会那么大。希望;)
我们需要一些Angular1的类比replace:truestackoverflow.com/questions/22497706/…有人说这个功能实际上是在angular2中但非官方支持的。
@Kuncevic 恰恰相反。它仍在 Angular1 中，但在那里已弃用。这就是为什么他们一开始不想在 Angular2 中添加它。事实证明，许多问题值得付出努力。
如果您考虑将这种技术与正在更改数据的ngFor 一起使用，您会惊讶于 UI 无法正确更新。

【解决方案3】：

类似的东西呢：

:host { display: contents; }

将它放在宿主组件的 css（或 scss）文件中将导致组件的框不呈现。

N.B：它以前对我有用——但显然我会担心浏览器的兼容性，特别是如果您正在开发以支持旧浏览器。我也很确定这并不完全超出“实验”阶段。文档还指出，这可能会导致可访问性问题。

【讨论】：

这样一个简短、简单、有效的答案
这很好用，没有额外的解决方法。希望 Angular 会在某个时候添加不呈现宿主元素的选项。
这对我不起作用。也许他们在较新版本的 Angular 中删除了此功能。
如果有选择器期望直接后代，这不一定有效。
虽然没有删除父元素，但至少不会在视觉上修改您的布局。

【解决方案4】：

还有另一种方法，我们可以从组件中获取组件的模板。
首先，我们创建组件，我们希望从浏览器渲染中移除它的标签（我们不是在这里试图移除标签。）

@Component({
  selector: 'tl-no-tag',
  template: `
    <template #tmp>
      <p>{{value}}</p>
    </template>`,
  styleUrls: []
})
export class TlNoTagComponent {
  @ViewChild('tmp') tmp: any;
  value = 5;
}

然后，在另一个组件的模板中，我们写：

<tl-no-tag #source></tl-no-tag> <!-- This line can be placed anywhere -->
<template [ngTemplateOutlet]="source.tmp"></template> <!-- This line will be placed where needed -->

然后，我们在浏览器中有这样的东西：

<tl-no-tag></tl-no-tag>
<p>5</p>

所以，我们将<p>{{value}}</p> 带出TlNoTagComponent。 <tl-no-tag></tl-no-tag> 将继续存在，但不会阻止任何 css 或 svg-thing。

【讨论】：

"模板是否有自己独立的变量作用域，模板能看到哪些变量？"看看这个（在模板内容部分）：blog.angular-university.io/…
如果您要使用 *ngFor 来处理这些数据，这就是您要走的路。我的方案是将<td> 组合在一起。此代码完美运行。确保在tl-no-tag 上设置display: none，这样它就不会干扰您的colspan。

【解决方案5】：

引用Angular 1 to Angular 2 Upgrade Strategy doc：

Angular 2 不支持替换其宿主元素的指令（在 Angular 1 中替换为 true 指令）。在许多情况下，这些指令可以升级为常规组件指令。

在某些情况下，常规组件指令不起作用，在这些情况下可以使用替代方法。例如对于 svg，请参见：https://github.com/mhevery/ng2-svg

【讨论】：

非常感谢您指出这一点。我确信在 Angular 中删除宿主元素是可能的，但这显然是我们在 AngularJS 时代使用的东西：