angular - 如何将焦点设置到 dx-text-box？

Question

我使用 dev extreme Angular 应用程序中的 UI 框架。

在文档中我找到了如何设置 focus 它说使用 method focus()

但是DxTextBoxComponent中没有焦点

如何设置焦点？

我的代码是:

@ViewChild("name", { static: false }) public inputName: DxTextBoxComponent;

  ngAfterViewInit() {
    this.inputName.instance.focus();
  }

HTML 是:

<dx-text-box #name>

没有效果

Answer 1

您的代码看起来是正确的。确保您导入了所有必需的依赖项和 DxTextBoxComponent，并且页面上只有一个具有此标识符的 TextBox。此代码在 CodeSandbox 中不起作用(我相信此问题特定于 CodeSanbox)，但它在本地项目和 DevExtreme 中有效 Widget Gallery .在那里添加以下代码

app.component.html

<dx-text-box #name value="John Smith"></dx-text-box>

应用程序组件.ts

//additional imports
import { ViewChild } from '@angular/core';
import { DxTextBoxComponent } from 'devextreme-angular';

//replace the AppComponent with this code
export class AppComponent {
    @ViewChild("name", { static: false }) inputName: DxTextBoxComponent;
    
    ngAfterViewInit() {
        this.inputName.instance.focus();
    }
}

我记录了一个screencast .

如果 ViewChild 指令不起作用，您可以使用 onInitialized 获取组件的实例事件处理程序:

app.component.html

<dx-text-box #name (onInitialized)="getInstance($event)"></dx-text-box>

应用程序组件.ts

export class AppComponent {
   inputName: any;

   getInstance(e) {
      this.inputName = e.component;
   }

   ngAfterViewInit() {
      this.inputName.focus();
   }
}

我还在本地和他们的 Widget Gallery 中发送了这种方法。它不需要任何额外的导入并且工作正常。