Angular2+ 渲染组件时根本不需要任何包装标签

Question

我的子组件如下所示：

...
@Component({
    selector: '[child-component]'
    templateUrl: './child.template.html'
})
...

我的父模板如下：

<span child-component [someInput]="123"></span>

现在我想渲染子组件的内容，而<span>周围没有容器。我不想在父组件的模板中出现任何容器，只需要子组件模板的内容。

我已经尝试过其他一些标签了。

• <ng-content>（根本没有渲染任何东西）
• <ng-template>（嵌入模板上的组件：）
• <ng-container>（无法在“节点”上执行“appendChild”）

提前致谢！

Answer 1

终于找到了一个可行的解决方案！

我的子组件如下所示：

@Component({
    selector: 'child-component'
    templateUrl: './child.template.html'
})
export class ChildComponent {
  @ViewChild('childComponentTemplate') childComponentTemplate: TemplateRef<any>;
}

我的子模板如下所示：

<ng-template #childComponentTemplate>
  ... some content ...
</ng-template>

我的父模板如下：

<child-component #wrapper [someInput]="123"></child-component>
<ng-container *ngTemplateOutlet='wrapper.childComponentTemplate'></ng-container>

这样就根本没有包装器了。

Answer 2

您的用例可以仅使用 CSS 来解决，只需设置child-component为display: contents，

child-component {
    display: contents;
}

display: contents 正如文档中所述，这会导致组件看起来像是元素父元素的直接子元素。