Angular - 打开角度对话框时自动向下滚动到底部答案

【问题标题】：Angular - Scroll down to bottom automatically when opening angular dialogAngular - 打开角度对话框时自动向下滚动到底部
【发布时间】：2018-12-24 11:31:20
【问题描述】：

我的项目中的角度材质对话框有问题，当我打开一个对话框时，它会自动向下滚动到底部，当我关闭对话框时，它会在打开之前滚动回原来的位置。

我试过了：

在我的对话框配置中添加autoFocus: false
在我的 app.module.ts 文件中将 BrowserAnimationModule 更改为 NoopAnimationModule
在对话框内容的按钮标签中添加tabindex="-1"

但没有任何效果，我使用自定义 CSS 主题，没有任何 JS 文件，我只使用材质来使用对话框。

这是我的代码：

public openAddLinkDialog(): void {
   this.dialog.open(AddLinkComponent).afterClosed().subscribe(data => {
      if (data) {
        console.log(data);
      }
   });
}

<div class="modal modal-right fade show" style="display: block;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Ajouter un lien</h5>
        <button type="button" class="close" (click)="closeDialog()">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body ps-container ps-theme-default">
        <p>Test</p>
      </div>
      <div class="modal-footer modal-footer-uniform">
        <button type="button" class="btn btn-bold btn-pure btn-secondary" (click)="closeDialog()">
          Fermer
        </button>
        <button type="button" class="btn btn-bold btn-pure btn-primary" [disabled]="form.invalid" (click)="addLink()">
          Ajouter
        </button>
      </div>
    </div>
  </div>
</div>
<div class="modal-backdrop fade show"></div>

【问题讨论】：

你能在stackblitz上上传代码吗？

标签： angular typescript dialog

【解决方案1】：

使用设置autoFocus: false打开窗口时添加配置对象例如，这里： const dialogRef = this.dialog.open( SomeComponent, { autoFocus: false }); 否则，窗口将滚动到第一个可聚焦元素，即您的按钮

【讨论】：