Angular 2根组件中的ng-content

ng-content in root Angular 2 component

本文关键字：ng-content 组件 2根 Angular      更新时间：2023-09-26

页面显示基本标记、安慰信息和加载指示。

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

根分量

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

显示问题的活塞在这里。

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

但是根组件忽略了ng-content。

这导致两个选项。初始布局应该被转储，并仅在启动后显示。或者它应该在根组件模板和HTML文档中复制(可能使用服务器端模板)。他们都不够好看。

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

这似乎是一个已知的问题，但我找不到一个可行的解决方案。

如何修复?

下面的链接状态为fixed by ivy。Ivy是angular v7.0的一个里程碑。

Transcludes不支持在根元素上，你不能传递任何东西给它，因为index.html不是angular的一部分。如果你不能将html嵌入到另一个组件中，那么我也不希望它与ng-content一起工作。

从https://github.com/angular/angular/issues/1858

# issuecomment - 207993202

组件只有在模板中被引用时才能作为组件工作另一个组件，但是它们被期望在此之外使用这会引起混淆

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

https://github.com/angular/angular/issues/4946

相关文章：