0

实际上，我正在通过包装 Angular 材质工具栏组件来创建自定义组件。我使用 ng-content 包装了第一个元素 mat-toolbar，并且仅使用 ng-content 包装了第二个元素 mat-toolbar-row。

在这里，我在投影第二个或多个 mat-toolbar-row 时遇到了一些问题，因为它没有在下一行显示它作为下一个工具栏行，它只在第一行显示第二个工具栏内容。因为我知道 ng-content 是静态投影，所以它在第一行投影第二个工具栏行，我该如何解决这个问题。

请在此处查找stackblitzLink，我还在自定义组件下方显示了材料示例。请帮我解决这个问题。提前致谢。

4

2 回答 2

1

对于仍在此处寻找答案的任何人，我最终都<mat-toolbar-row></mat-toolbar-row>用<ng-container></ng-container>标签包装了。

在我拥有这样的自定义工具栏组件之前：

<mat-toolbar>
  <mat-toolbar-row>
    ...
  </mat-toolbar-row>
  <ng-content select="mat-toolbar-row"></ng-content>
</mat-toolbar>

我把它改成这样：

<mat-toolbar>
  <ng-container>
    <mat-toolbar-row>
      ...
    </mat-toolbar-row>
  </ng-container>
  <ng-content select="mat-toolbar-row"></ng-content>
</mat-toolbar>

不知何故，该<ng-container></ng-container>标签使工具栏行以正确的顺序排列。

于 2019-09-09T20:36:43.933 回答
0 
<mat-toolbar [color]="color">
  <ng-content></ng-content>
  <ng-container select="sq-toolbar-row">
  <mat-toolbar-row >
  </mat-toolbar-row>
  </ng-container>
</mat-toolbar>
于 2018-11-15T03:12:27.630 回答