Question

该页面显示基本标记，舒适信息和加载指示。

<html>
...
<body app>
...page layout and loading stuff...
</body>

</html>

根组件是

@Component({
  selector: 'body[app]',
  template: `<ng-content></ng-content>`
})
App {}

展示问题的傻瓜是here。

在SPA初始化之后，它应该引导body元素并在保存现有基本布局的同时编译组件。

但是，根组件只会忽略ng-content。

这导致两种选择。初始布局应该被转储并仅在引导之后显示。或者它应该在根组件模板和HTML文档中重复（可能与服务器端模板）。他们都不够好看。

body包含敏感标记，无法将其包装到子组件中以克服此限制。我打算使用Angular Universal为SPA提供整洁的静态预览，但不是在这个阶段。

看起来这是一个众所周知的问题，但我找不到可行的解决方案。

如何解决？

Answer 1

以下链接的状态为fixed by ivy。常春藤是角度v7.0的里程碑。

根元素不支持Transcludes，因为index.html不是angular的一部分，所以不能传递任何内容。如果你不能将html嵌入到另一个组件中，那么我不希望它与ng-content一起使用。

组件仅在模板中引用时作为组件工作另一个组件，但预计它们将在此之外使用这导致混乱

Answer 2

在计划实施的根组件中使用<ng-content>。