Angular2 +渲染组件时根本没有任何包装标签 [英] Angular2+ render a component without any wrapping tag at all

问题描述

我的子组件看起来像:

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

和我的父模板，例如:

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

现在，我要呈现子组件的内容而没有<span>容器.我在父组件的模板中根本不需要容器，而在子组件的模板中根本不需要容器.

now I want to render the content of my child component without the <span> container around it. I want no container at all in my parent component's template, just the content of our child-component's template.

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

I tried some other tags already.

• <ng-content>(什么都没有呈现)
• <ng-template>(嵌入式模板上的组件:)
• <ng-container>(无法在节点"上执行"appendChild")

• <ng-content> (nothing rendered at all)
• <ng-template> (Components on an embedded template:)
• <ng-container> (Failed to execute 'appendChild' on 'Node')

提前谢谢！

推荐答案

最后找到了有效的解决方法！

Finally found a working soltion!

我的子组件如下:

@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-content *ngTemplateOutlet='wrapper.childComponentTemplate'></ng-content>

这样，根本就没有包装器.

This way there is no wrapper at all.

这篇关于Angular2 +渲染组件时根本没有任何包装标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！