Question

打开mat-dialog时，我会自动向下滚动。我有2个导致问题的按钮（我认为），但是我不知道该怎么做才能解决问题。

component.ts代码：

 openDialog(): void {
let dialogRef = this.dialog.open(FileBrowserComponent, { 
       height: '600px',
       width: '700px',
});

对话框html代码：

<div class="container">

<div class="img" *ngFor="let element of fileElements">
    <img src="{{assetsFullUrl(element.name)}}" alt="{{element.name}}" (dblclick)="selectedImage===true">
</div>

</div>

<vaadin-upload target="http://localhost:3000/assets/upload" method="POST" 
accept="image/*"></vaadin-upload>

<div class="buttons">
<button mat-raised-button color='primary' type="button" (click)="add()">Save</button>
<button mat-raised-button color='basic' type="button" (click)="cancel()">Cancel</button>
</div>

感谢您的帮助。

Answer 1

尝试在代码中添加“ autoFocus：false”：

openDialog(): void { let dialogRef = this.dialog.open(FileBrowserComponent, { height: '600px', width: '700px', autoFocus: false, });

Answer 2

根据the documentation，第一个可制表元素将被聚焦。您可以分配tabindex="-1"来防止按钮聚焦

<button mat-raised-button tabindex="-1">Not Tabbable</button>

角度6垫对话框自动向下滚动到底部

2 个答案: