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

您只能通过使用CSS来解决此问题，只需将child-component设置为display: contents，

    child-component {
        display: contents;
    }

如display: contents documentation所述，这使得该组件看起来好像是该元素的父级的直接子级。

Answer 2

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

我的子组件如下：

@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>

这样，根本没有包装器。

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

2 个答案: