Question

在我构建的自定义模态组件中，只要打开模态，我就希望获得模态集中的输入

我尝试了两种方法：

1）使用ViewChild和ElementRef，然后在模式打开时触发focus（method）；

2）使用document.getElementByID('test').focus()方法；

他们都没有工作

我尝试测试另一个文档属性，并且该属性起作用。

document.getElementByID('test').innerHtml = 'test'

但没有焦点

模式的html简化

<div [class.modal--open]="_open">
  <input #codeInput type="text" id='test'>
</div?

ts：

  @ViewChild('codeInput') codeInput: ElementRef
  @Input() set open(value: boolean) {
    this._open = value;
    if (value) {
     // here is where i need to get focus on the input
        document.getElementByID('test').focus() // did not work
        this.codeInput.nativeElement.focus() // did not work
    }
  }

用于测试https://stackblitz.com/edit/angular-2ye3ag的演示

Answer 1

只需在输入字段中使用自动对焦

<input type="text" name="firstName" autofocus>

Working example

Answer 2

您在模态类声明中有一个错误，请更正它，它将起作用

<div  [ngClass]="['modal', style]" [class.modal--open]="_open">
                    ^
<div  [ngClass]="modal" [class.modal--open]="_open">

https://stackblitz.com/edit/angular-zsszxc

Answer 3

如果要进行动态聚焦，则可以使用afterviewInit生命周期挂钩，在viewInit之后，您可以使用渲染器而不是本机方法来设置焦点。

在您的组件中

AfterViewinit() {    
this._renderer.setAttribute(elRef,'focus',true);    
}

Answer 4

我发现了问题所在，重点是工作，它只需要一些时间就可以触发，我用focus()包裹了setTimeOut()方法，并且有效了

    if (value) {
      setTimeout(() => {
        this.codeInput.nativeElement.focus()
      }, 1000)
    }

完整解决方案https://stackblitz.com/edit/angular-2ye3ag

Answer 5

对于使用- ng-Bootstrap

的用户

仅，在调用了模态方法remote之后，您可以按id来获取元素，然后调用方法open(...)

focus()

Angular 2+如何在打开模态时将注意力集中在模态输入上？

5 个答案: