如何在 MatDialog 中使用 scrollStrategy? [英] How to use scrollStrategy in MatDialog?
问题描述
我尝试在重新定位策略中为对话框制作滚动条,但对我不起作用.
const scrollStrategy = this.overlay.scrollStrategies.reposition();const dialogRef = this.dialog.open( DialogOverviewExampleDialog, { scrollStrategy } );
我希望在滚动整个对话框时(元素 .cdk-overlay-pane
)会移动
如果你想滚动对话框的内容,那么你必须使用
标签,或者在你的 div 元素中使用指令 mat-dialog-content .在您的示例中,请尝试以下操作:
嗨{{data.name}}
<mat-dialog-content><!-- 而不是你的 <div>或使用 <div mat-dialog-content>--><p>你最喜欢的动物是什么!!!!!!!</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么?</p><p>你最喜欢的动物是什么!!!!!!</p><mat-form-field><input matInput [(ngModel)]="data.animal"></mat-form-field></mat-dialog-content><!-- 而不是你的 </div>--><div mat-dialog-actions><button mat-button (click)="onNoClick()">不,谢谢</button><button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>好的</button>
现在你的对话内容应该有一个滚动条.阅读有关对话框的可滚动内容容器的更多信息:
https://material.angular.io/components/dialog/api#MatDialogContent
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 } );
I expect that during scrolling the whole dialog(element .cdk-overlay-pane
) will move
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屋!