Angular2+ 渲染一个完全没有任何包装标签的组件

Question

我的子组件看起来像：

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

我的父模板如下：

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

现在我想呈现我的子组件的内容，但周围没有 <span> 容器。我不想在我的父组件模板中有任何容器，只有我们的子组件模板的内容。

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

<ng-content>（完全没有渲染）
<ng-template>（嵌入式模板上的组件:)
<ng-container>（无法在 'Node' 上执行 '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 documentation 所述，这导致组件看起来好像是元素父元素的直接子元素。

Answer 3

该方法可以避免ExpressionChangedAfterItHasBeenCheckedError错误。

child-component:

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

export class ChildComponent implements OnInit {
@ViewChild('childTemplate', {static: true}) childTemplate: TemplateRef<any>;

constructor(
      private view: ViewContainerRef
) {}

ngOnInit(): void {
    this.view.createEmbeddedView(this.currentUserTemplate);
}

}

parent-component:

<child-component></child-component>

Angular2+ 渲染一个完全没有任何包装标签的组件

Angular2+ render a component without any wrapping tag at all

dom

angular2-directives

angular2-template

angular2-ngcontent

angular