根Angular 2组件中的ng-content [英] ng-content in root Angular 2 component
问题描述
该页面显示基本标记，舒适信息和加载指示。
The page shows basic markup, comforting message and loading indicator.
<html>
...
<body app>
...page layout and loading stuff...
</body>
</html>
根组件是
@Component({
selector: 'body[app]',
template: `<ng-content></ng-content>`
})
App {}
一个演示问题的plunker是这里。
A plunker that demonstrates the problem is here.
在SPA初始化之后它应该是bootstrap body 元素和编译组件，同时保存现有的基本布局。
After SPA initialization it is supposed to bootstrap body element and compile components while saving existing basic layout.
但是，根组件只是忽略 ng-content 。
However, root component just ignores ng-content.
这导致两个选项。初始布局应该被转储并仅在引导之后显示。或者它应该在根组件模板和HTML文档中重复（可能与服务器端模板）。它们看起来都不够好。
This leads to two options. The initial layout should be dumped and shown only after bootstrapping. Or it should be duplicated in both root component template and HTML document (likely with server-side templating). None of them looks good enough.
body 包含敏感标记，无法将其包装到子组件中以克服此问题局限性。我打算使用Angular Universal为SPA提供整洁的静态预览，但不是在这个阶段。
body contains sensitive markup that cannot be just wrapped into child component to overcome this limitation. I intend to use Angular Universal to provide SPA with neat static preview, but not at this stage.
看起来这是一个已知问题，但我找不到一个可行的解决方案。
It looks like it is a known problem but I'm unable to find a workable solution.
如何修复？
推荐答案
以下链接的状态为，由常春藤修复。常春藤是角度v7.0的里程碑。
The link below has been given the status fixed by ivy. Ivy is a milestone for angular v7.0.
根元素不支持Transcludes，你无法通过任何东西，因为index.html不是角度的一部分。如果你不能将html嵌入到另一个组件中，那么我不希望它与 ng-content 一起使用。
Transcludes are not supported on the root element, you can't pass anything to it because index.html isn't part of angular. If you can't embed the html within another component then I wouldn't expect it to work with ng-content either.
来自 https://github.com/angular/angular/issues / 1858＃issuecomment-207993202
组件仅在
另一个组件的模板中引用时作为组件，但预计它们会在
之外使用而导致混淆
Components only work as components when referenced in the template of another component, yet they are expected to be used outside of this which causes confusion
这篇关于根Angular 2组件中的ng-content的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
