时间戳

首页 > 解决方案 > 有角度的多个 ng-content 容器不尊重模板

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

问题描述

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

我们为此提供了三个 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，但这没有帮助。

结果： 不需要的结果（垫片消失了！）

感谢您的建议。

标签： angularflexboxangular-materialangular8

解决方案

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

推荐阅读