angular - 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'）

提前致谢！

标签： angulardomangular2-templateangular2-directivesangular2-ngcontent

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>

这种方式根本没有包装器。