Angular 5 Material，如何删除 Mat 对话框中的垂直滚动

CSS

如何删除 Mat 对话框中的垂直滚动？

Mat 对话框是 Angular Material 库中提供的一个组件，用于显示对话框内容。在默认情况下，对话框内容超过对话框高度时会出现垂直滚动条。然而，有时候我们可能希望禁用垂直滚动条，以便内容能够完全展示在对话框中。

要删除 Mat 对话框中的垂直滚动，可以通过自定义 CSS 样式来实现。下面是一个示例：

首先，创建一个自定义 CSS 文件，比如 custom-dialog.CSS，并将其添加到 Angular 项目中。

然后，在 custom-dialog.CSS 文件中添加以下样式：

CSS
.mat-dialog-contAIner {
  overflow-y: hidden !important;
}

这个样式会将对话框容器的垂直滚动条设置为隐藏，使用 !important 是为了覆盖 Angular Material 库中的默认样式。

接下来，在使用 Mat 对话框的组件中引入 custom-dialog.CSS 文件。可以在组件的 styleUrls 数组中添加路径，比如：

typescript
@Component({
  ...
  styleUrls: ['./custom-dialog.CSS']
})

这样，对话框中的垂直滚动条就会被禁用，内容可以完全展示在对话框中。

示例代码：

typescript
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
@Component({
  selector: 'app-dialog-example',
  templateUrl: './dialog-example.component.html',
  styleUrls: ['./dialog-example.component.CSS']
})
export class DialogExampleComponent implements OnInit {
  constructor(private dialog: MatDialog) { }
  ngOnInit() {
  }
  openDialog() {
    const dialogRef = this.dialog.open(DialogContentComponent, {
      width: '400px'
    });
  }
}
@Component({
  selector: 'app-dialog-content',
  template: <code>
    <h2 mat-dialog-title>Dialog Title</h2>
    <mat-dialog-content>
      
Dialog content goes here.
      
<img src="https://img.izhida.com/topic/0a40e3c91a3a55c9a37428c6d194d0e5.jpg" alt="AI"><br>AI
More content...
      
Even more content...
      <!-- Add more content here -->
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button mat-dialog-close>Close</button>
    </mat-dialog-actions>
  </code>,
})
export class DialogContentComponent { }

在上面的示例中，我们创建了一个包含打开对话框按钮的组件 DialogExampleComponent。当用户点击按钮时，会打开一个对话框，并在对话框中显示 DialogContentComponent 组件的内容。

在 DialogContentComponent 组件的模板中，我们可以放置任意多的内容。如果内容超过对话框的高度，垂直滚动条会出现。但是，通过应用自定义的 CSS 样式，我们可以禁用垂直滚动条，使内容完全展示在对话框中。

这样，我们就通过自定义 CSS 样式成功删除了 Mat 对话框中的垂直滚动条。