logo标签列表

根Angular 2组件中的ng-content

javascriptangulartypescript
6
该页面展示了基本的标记、安慰信息和加载指示器。
<html>
...
<body app>
...page layout and loading stuff...
</body>

</html>

根组件是

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

这个 here">plunker 展示了问题。

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

然而，根组件忽略了 ng-content。

这会带来两个选择。初始布局应该被丢弃，并在引导后仅显示。或者它应该在根组件模板和HTML文档中重复（可能使用服务器端模板）。但都不够好。

body 包含敏感标记，不能仅仅通过包装成子组件来克服此限制。我打算使用 Angular Universal 来为 SPA 提供整洁的静态预览，但不是在这个阶段。

看起来这是一个已知的问题，但我无法找到可行的解决方案。

如何修复它？

@GünterZöchbauer 那个被认为是重复的帖子包含了过时的答案，我并不满意。事情已经发生了变化，我希望有一个更好的答案，这并非没有原因。 - Estus Flask
"not without a reason"的意思是什么？我不知道有任何关于这个问题的变化。 - Günter Zöchbauer
@GünterZöchbauer 尽管标题可能不准确，但这不是RTM问题，也不是重复的问题，问题不在于为什么会发生这种情况，而在于如何实现所需的行为。我对this解决方案不满意，并想知道是否有更符合习惯的方法，可能涉及到黑客核心A2提供商，而不需要Universal。重复的问题已经得到了公正的回答。这个问题还没有。 - Estus Flask
这仍然是与 https://dev59.com/z1wY5IYBdhLWcg3wgHzy 相同的问题，即使您想要不同的答案，但并不那么重要。 - Günter Zöchbauer
@GünterZöchbauer 谢谢。如果这样有助于理解，我可以完全删除提到 ng-content 的部分，但这会使问题的上下文不太明显。 - Estus Flask
2个回答
5
下面的链接已被标记为由ivy修复。Ivy是Angular v7.0的一个里程碑。
根元素不支持Transcludes，你不能传递任何内容给它，因为index.html不是Angular的一部分。如果你无法将HTML嵌入另一个组件中，则我也不希望使用ng-content工作。
来自https://github.com/angular/angular/issues/1858#issuecomment-207993202

在其他组件的模板中引用组件时，组件只能作为组件工作，但是预计它们将在此之外使用，这会导致混乱。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接