Angular中mat-dialog-title与mat-dialog-actions无法吸顶吸底如何解决

问题原因 #

1. Angular Material 对话框的标题固定、操作栏固定能力，依赖mat-dialog-title、mat-dialog-actions指令直接绑定在真实DOM节点上，你当前使用ng-container配合ngProjectAs的写法，ng-container不属于真实渲染的DOM元素，框架无法识别到对应的标题节点，无法为其添加sticky固定的样式。
2. 需检查你自定义的cmd-args-dialog面板类是否给对话框容器添加了overflow: auto/overflow-y: scroll属性：如果整个对话框容器设置了滚动，会导致内容、标题、操作栏整体滚动，破坏原本仅内容区滚动的默认逻辑。

解决方法 #

方案1：直接给自定义标题组件绑定指令 #

去掉外层的ng-container包装，直接把mat-dialog-title指令绑定到你的自定义标题组件上，修改后的标题代码如下：

<app-dialog-header mat-dialog-title header="Command Line Arguments"></app-dialog-header>

<div mat-dialog-content fxLayout="column" fxLayoutGap="5px">
  <textarea rows="15" class="primary-background"></textarea>
</div>

<div mat-dialog-actions fxLayout="row" fxLayoutAlign="space-between center">
  <button mat-button>Cancel</button>
  <button mat-button color="accent">Save</button>
</div>

方案2：使用真实DOM节点包裹自定义标题 #

如果你需要保留内容投影的配置，将ng-container替换为真实的div节点，给div添加mat-dialog-title指令即可：

<div mat-dialog-title>
  <app-dialog-header header="Command Line Arguments"></app-dialog-header>
</div>

额外检查项 #

确认你的cmd-args-dialog自定义类没有给对话框根节点添加滚动相关属性，保留框架默认的仅mat-dialog-content区域可滚动的配置即可。

修改后框架会自动给识别到的标题添加顶部sticky定位、操作栏添加底部sticky定位，实现你需要的固定效果。

内容的提问来源于stack exchange，提问作者Get Off My Lawn