Angular Material中mat-divider未正常显示在mat-toolbar-row之间的问题

问题原因 #

mat-toolbar 默认采用 flex 横向布局，仅会将直接子元素 mat-toolbar-row 识别为独立垂直行进行排版，其他直接插入的非row元素会被默认归入顶部行容器渲染，因此直接插在两个row之间的mat-divider会出现在顶部。

解决方案 #

推荐使用修改toolbar布局的方案，无需固定高度适配，兼容性最好：

1. 给mat-toolbar添加自定义类，修改其flex布局为纵向排列：

<mat-toolbar color="primary" class="multi-row-toolbar">
    <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>

2. 添加对应样式：

.multi-row-toolbar {
  flex-direction: column;
  align-items: stretch;
  height: auto;
  padding: 0;
}

如果不想修改toolbar的全局布局，也可以将mat-divider包裹在独立的mat-toolbar-row中实现：

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>This is toolbar 1.</span>
  </mat-toolbar-row>
  <!-- 包裹divider的独立行 -->
  <mat-toolbar-row style="height: 1px; min-height: unset; padding: 0;">
    <mat-divider></mat-divider>
  </mat-toolbar-row>
  <mat-toolbar-row>
    <span>This is toolbar 2</span>
  </mat-toolbar-row>
</mat-toolbar>

内容的提问来源于stack exchange，提问作者sam