角度多个ng-content容器不尊重模板

Question

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

为此，我们提供了三个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>

问题在于，渲染页面时，间隔符消失了。 因此，所有菜单项都显示在左侧。 就像ng-content部分之间的angular不支持静态内容一样。我们试图在ng-content元素周围添加spans / divs，但这无济于事。

结果：

感谢您的建议。

Answer 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），该示例几乎正是您所需要的。