如何在MatDialog中使用scrollStrategy? [英] How to use scrollStrategy in MatDialog?

问题描述

我试图在重新定位策略中为对话框滚动，但这对我不起作用.

I tried to make a scroll for a dialog in reposition strategy, but it doesn't work for me.

const scrollStrategy = this.overlay.scrollStrategies.reposition();
const dialogRef = this.dialog.open( DialogOverviewExampleDialog, { scrollStrategy } );

完整示例

我希望在滚动过程中整个对话框(元素.cdk-overlay-pane)都会移动

I expect that during scrolling the whole dialog(element .cdk-overlay-pane) will move

几乎正确的行为

推荐答案

如果要滚动对话框的内容，则必须使用<mat-dialog-content>标记，或在div中使用指令mat-dialog-content元素. 在您的示例中，尝试以下操作:

If you want to scroll the content of the dialog then you have to use the <mat-dialog-content> tag, or use the directive mat-dialog-content in your div element. In your example try the following instead:

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<mat-dialog-content> <!-- instead of your <div>  or use <div mat-dialog-content> -->
  <p>What's your favorite animal!!!!!!!</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal!!!!!!</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</mat-dialog-content> <!-- instead of your </div> -->
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

现在您的对话框内容应该在侧面滚动. 在以下位置了解有关对话框的可滚动内容容器的更多信息:

And now your dialog content should have a scroll on the side. Read more about the Scrollable content container of a dialog on:

https://material.angular.io/components/dialog/api#MatDialogContent

这篇关于如何在MatDialog中使用scrollStrategy?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！