Question

我正在使用Angular Material设计的mat-dialog。当内容长于容器高度时，mat-dialog-content中的内容应滚动。

滚动条在您向下滚动时出现，但在几秒钟后消失。对话框出现时如何显示滚动条？以便指示用户下面有更多内容，他们将不得不向下滚动。

Answer 1

您可以在对话框组件constructor中执行以下操作，以始终在打开对话框时显示垂直滚动。

DI Renderer2调用元素上的setSyle()方法

private ren:Renderer2

CDK覆盖不是组件的一部分，需要从文档中抓取。

let el = document.getElementsByClassName('mat-dialog-container').item(0);

使用Renderer2调用setStyle()方法

ren.setStyle(el, 'overflow-y', 'scroll')

组件

import {Component, Inject, Renderer2} from '@angular/core'; 

constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData,
    private ren:Renderer2
    ) {
      let el = document.getElementsByClassName('mat-dialog-container').item(0);
      ren.setStyle(el, 'overflow-y', 'scroll')
     }

Stackblitz

https://stackblitz.com/edit/angular-372fxl?embed=1&file=app/dialog-overview-example.ts

当出现垫对话框时显示滚动条-角材料设计

1 个答案: