如何在 Angular 的对话框中添加滚动条? [英] How to add scrollbar to my dialog in Angular?

问题描述

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

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

我的 NgxChartsComponent 的 HTML 代码是:

<!-- 图表类型进入这里--><div>这是折线图的视觉表示</div><div style="display: inline-block"><ngx-charts-折线图[视图]="视图"[方案]="颜色方案"[结果]="多"[渐变]="渐变"[xAxis]="showXAxis"[yAxis]="showYAxis"[图例]="showLegend"[showXAxisLabel]="showXAxisLabel"[showYAxisLabel]="showYAxisLabel"[xAxisLabel]="xAxisLabel"[yAxisLabel]="yAxisLabel"[自动缩放]="自动缩放"[时间线]="时间线"(select)="onSelect($event)"></ngx-charts-line-chart>

<br><div>这是面积图</div>的可视化表示.<div style="display: inline-block"><ngx-charts-area-chart[视图]="视图"[方案]="颜色方案"[结果]="多"[渐变]="渐变"[xAxis]="showXAxis"[yAxis]="showYAxis"[图例]="showLegend"[showXAxisLabel]="showXAxisLabel"[showYAxisLabel]="showYAxisLabel"[xAxisLabel]="xAxisLabel"[yAxisLabel]="yAxisLabel"[自动缩放]="自动缩放"(select)="onSelect($event)"></ngx-charts-area-chart>

<br><div>这是饼图的可视化表示</div><div style="display: inline-block"><ngx-charts-饼图[视图]="视图"[方案]="颜色方案"[结果]="单"[图例]="showLegend"[explodeSlices]="explodeSlices"[标签]="showLabels"[甜甜圈]="甜甜圈"[渐变]="渐变"(select)="onSelect($event)"></ngx-charts-饼图>

我使用 MatDialog 和 MatDialogRef 来创建我的对话框，它运行良好，但我必须缩小屏幕才能看到对话框的完整内容并且没有滚动设施！请帮助我知道如何在弹出的对话框窗口中添加滚动条?

解决方案

你应该使用 MatDialogContent 来定义你的可滚动内容.像这样:

<!-- 把你的 Lage 内容放在这里 --></mat-dialog-content>

您可以在此处查看第一个示例 https://material.angular.io/components/对话框/示例

I am opening a dialog window using the following function:

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

  }

And the HTML code of my NgxChartsComponent is:

<!-- 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>

I use MatDialog and MatDialogRef to create my dialog and it works well but I must zoom out the screen to see the full content of the dialog and there is no scroll facility for that! Please help me know how can I add scroll to my popup dialog window?

解决方案

You should use MatDialogContent to define your scrollable content. Like that:

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

You can see the first example here https://material.angular.io/components/dialog/examples

这篇关于如何在 Angular 的对话框中添加滚动条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！