我们刚刚将应用程序升级到angular 7,我们注意到所有ngBootstrap模式现在都有一个默认的关闭按钮自动对焦,如下图所示.

modal image

这是我的代码:

html模式代码:

<form [formGroup]="storeForm" novalidate>
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Modal Test</h4>
            <button type="button" class="close" aria-label="Close" 
               (click)="activeModal.dismiss('Cross click')">
               <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <h4>Todo</h4>
        </div>
        <div class="modal-footer">
            <button role="button" type="submit" class="btn btn-primary" 
               (click)="activeModal.close('Finish click')" prevent-double- 
               submit>{{ 'store.add.finish' | translate }}</button>
       </div>
    </div>
</form>

多亏了我的组件,模态是如何命名的.ts

    const modal = this._modalService.open(ModalComponent, { backdrop: 
       'static', size: 'lg'});
    modal.result.then(
        (data) => {
           // some code
        },
        () => {
        }
    );

我的问题是,我如何删除这个不符合我们预期行为的默认自动对焦?

感谢阅读,请原谅拼写错误.

推荐答案

出于可访问性和键盘导航的原因,需要将重点放在模态中.默认情况下,焦点位于modal中的第一个可聚焦元素上,在您的情况下是close按钮.可以将ngbAutofocus属性添加到希望焦点所在的元素中.

Focus management demo

<button type="button" ngbAutofocus class="btn btn-danger"
      (click)="modal.close('Ok click')">Ok</button>

你可以阅读更多关于github的文章

Typescript相关问答推荐

类型脚本中的Gnomeshell 扩展.如何导入.ts文件

TypScript手册中的never[]参数类型是什么意思?

VS代码1.88.0中未出现自动导入建议

在这种情况下,如何获得类型安全函数的返回值?

React router 6.22.3不只是在生产模式下显示,为什么?

如何根据另一个属性的布尔值来缩小函数属性的返回类型?

获取函数中具有动态泛型的函数的参数

角效用函数的类型推断

我可以使用TypeScrip从字符串词典/记录中填充强类型的环境对象吗?

使用Redux Saga操作通道对操作进行排序不起作用

有什么方法可以类型安全地包装import()函数吗?

在排版修饰器中推断方法响应类型

在打印脚本中使用泛型扩展抽象类

为什么我的查询钩子返回的结果与浏览器的网络选项卡中看到的结果不同?

TypeScrip-根据一个参数值验证另一个参数值

创建一个TypeScrip对象并基于来自输入对象的约束定义其类型

如果判断空值,则基本类型Gaurd不起作用

无法缩小深度嵌套对象props 的范围

类型';只读<;部分<;字符串|记录<;字符串、字符串|未定义&>';上不存在TS 2339错误属性.属性&q;x&q;不存在字符串

是否可以将类型参数约束为不具有属性?