mat-divider 没有出现在 mat-toolbar-row 之间

【问题标题】：mat-divider not appearing between mat-toolbar-rowmat-divider 没有出现在 mat-toolbar-row 之间
【发布时间】：2021-10-23 02:09:08
【问题描述】：

我正在尝试有角度的材料，但不明白为什么分隔线在浏览器的顶部呈现。据我了解，它应该位于工具栏 1 和工具栏 2 之间。

<mat-toolbar color="primary">
    <mat-toolbar-row>
    <span>This is toolbar 1.</span>
    </mat-toolbar-row>
    <mat-divider></mat-divider>
    <mat-toolbar-row>
        <span>This is toolbar 2</span>
        </mat-toolbar-row>
  </mat-toolbar>

在浏览器上呈现如下

【问题讨论】：

标签： angular angular-material material-design

【解决方案1】：

因为 mat-toolbar 组件正在使用这样的内容投影：

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

所以所有 mat-toolbar-rows 都到了底部。如果你像这样包裹你的分隔线，它会解决这个问题。

<mat-toolbar color="primary">
    <mat-toolbar-row>
    <span>This is toolbar 1.</span>
    </mat-toolbar-row>
    <mat-toolbar-row>
     <mat-divider></mat-divider>
    </mat-toolbar-row>
    <mat-toolbar-row>
        <span>This is toolbar 2</span>
        </mat-toolbar-row>
  </mat-toolbar>

【讨论】：

刚刚学到了一些东西！不知道ng-content 的select 属性！