我的子组件看起来像:
...
@Component({
selector: '[child-component]'
templateUrl: './child.template.html'
})
...
和我的父模板如:
<span child-component [someInput]="123"></span>
现在我想渲染我的子组件的内容,而不是围绕它的<span>
容器。我在父组件的模板中根本不需要容器,只是我们的子组件模板的内容。
我已经尝试了其他一些标签。
<ng-content>
(根本没有渲染)<ng-template>
(嵌入式模板上的组件:)<ng-container>
(无法在'Node'上执行'appendChild')提前致谢!
终于找到了有效的解决方案
我的子组件看起来像:
@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>
这样就没有包装器了。