如何在 Angular 中的对话框中添加滚动条？答案

【问题标题】：How to add scrollbar to my dialog in Angular?如何在 Angular 中的对话框中添加滚动条？
【发布时间】：2020-01-17 15:45:32
【问题描述】：

我正在使用以下函数打开一个对话窗口：

  doOutput(){
    this.dialog.open(NgxChartsComponent ) ; 

  }

而我NgxChartsComponent的HTML代码是：

<!-- The chart type goes in here -->

<div> This is a visual representation of a line chart</div>
<div style="display: inline-block">
    <ngx-charts-line-chart
      [view]="view"
      [scheme]="colorScheme"
      [results]="multi"
      [gradient]="gradient"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [legend]="showLegend"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [autoScale]="autoScale"
      [timeline]="timeline"
      (select)="onSelect($event)">
    </ngx-charts-line-chart>
  </div>

    <br>
    <div> This is a visual representation of a area chart</div>

    <div style="display: inline-block">
    <ngx-charts-area-chart
      [view]="view"
      [scheme]="colorScheme"
      [results]="multi"
      [gradient]="gradient"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [legend]="showLegend"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [autoScale]="autoScale"
      (select)="onSelect($event)">
    </ngx-charts-area-chart>
    </div>


    <br>
    <div> This is a visual representation of a pie chart</div>

    <div style="display: inline-block">
    <ngx-charts-pie-chart
    [view]="view"
    [scheme]="colorScheme"
    [results]="single"
    [legend]="showLegend"
    [explodeSlices]="explodeSlices"
    [labels]="showLabels"
    [doughnut]="doughnut"
    [gradient]="gradient"
    (select)="onSelect($event)">
  </ngx-charts-pie-chart>
</div>

我使用MatDialog 和MatDialogRef 创建我的对话框，效果很好，但我必须缩小屏幕才能看到对话框的全部内容，而且没有滚动功能！请帮助我知道如何在弹出对话框窗口中添加滚动？

【问题讨论】：

如何制作弹出窗口？当然 ngbModal 有一个可滚动的选项，我也支持材质对话框
@Eliseo：我使用MatDialog。
也许你应该读一下：stackoverflow.com/questions/49651320/…
@standby954：我不明白我到底应该做什么？我应该将我的 html 代码放在 mat-dialog 标记中吗？

标签： angular angular-material dialog scrollview scrollbar

【解决方案1】：

我认为您只需要在对话框的 css 中添加一个简单的overflow: scroll;

【讨论】：

我的对话css是什么意思？你是说Ngxcharts.component的css代码吗？

【解决方案2】：

您应该使用 MatDialogContent 来定义您的可滚动内容。像这样：

<mat-dialog-content>
   <!-- put your lage content here -->
</mat-dialog-content>

你可以在这里看到第一个例子https://material.angular.io/components/dialog/examples

【讨论】：