有角度的多个 ng-content 容器不尊重模板答案

【问题标题】：angular multiple ng-content containers doesn't respect template有角度的多个 ng-content 容器不尊重模板
【发布时间】：2019-12-28 20:39:36
【问题描述】：

我们正在尝试创建一个工具栏组件，该组件从另一个组件接收其菜单项。我们希望菜单项位于左侧（主导航）和右侧（语言 + 用户按钮）。

我们为此提供了三个 ng-content 部分，在第一个（主导航）和其他两个之间有一个间隔。

<mat-toolbar color="primary">
<mat-toolbar-row>
  <ng-content select="[fps-navbar-items]"></ng-content>

  <span class="spacer"></span>

  <ng-content select="[fps-navbar-auth]"></ng-content>
  <ng-content select="[fps-navbar-language]"></ng-content>
</mat-toolbar-row>
</mat-toolbar>

问题是在渲染页面时，spacer 已经消失了。所以所有的菜单项都出现在左边。就像 Angular 不支持 ng-content 部分之间的静态内容一样。我们尝试在 ng-content 元素周围添加 spans/div，但没有帮助。

结果：

感谢您的建议。

【问题讨论】：

我重建了您的机箱，它按预期工作，并且垫片渲染得很好。我正在运行角度 8.2.2 和材料 8.1.3。您能否提供更多有关如何将 ng-content 传递到工具栏的代码？
谢谢塞巴斯蒂安。我这个周末无法访问代码，我可以在下周提供。我们的用例与下面发布的 Kenneth 示例非常相似。我不明白为什么我们会得到不同的行为。周一继续……

标签： angular flexbox angular-material angular8

【解决方案1】：

<ng-content> 不“生成”内容，它只是投射现有内容。所以他们不应该在他们之间替换任何代码。在这篇有用的文章中查看更多信息 (https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b)

您还可以在此处查看工作示例 (https://stackblitz.com/edit/angular-avemjm-qzybci?file=app/toolbar-multirow-example.html)，这几乎正是您所需要的。

【讨论】：

非常感谢肯尼斯。我们的代码与您的 stackblitz 非常相似，但我们得到了不同的结果。不过这个周末我无法访问代码，所以我现在无法真正测试或检查任何东西。周一继续……
好吧，我的错。我通过传入占位符内容摸索了。