我在Angular应用程序中使用dev Extreme UI框架。
在文档中,我发现了如何设置focus
使用说明method focus()
但是没有重点 DxTextBoxComponent
如何设定焦点?
我的代码是:
@ViewChild("name", { static: false }) public inputName: DxTextBoxComponent;
ngAfterViewInit() {
this.inputName.instance.focus();
}
HTML是:
<dx-text-box #name>
没有效果
您的代码看起来正确。确保已导入所有必需的依赖项和DxTextBoxComponent,并且页面上只有一个具有此标识符的TextBox。此代码在CodeSandbox中不起作用(我相信此问题特定于CodeSanbox),但在本地项目和DevExtreme Widget Gallery中均有效。在其中添加以下代码
app.component.html
<dx-text-box #name value="John Smith"></dx-text-box>
app.component.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();
}
}
我录制了一个截屏视频。
如果ViewChild指令不起作用,则可以使用onInitialized事件处理程序获取组件的实例:
app.component.html
<dx-text-box #name (onInitialized)="getInstance($event)"></dx-text-box>
app.component.ts
export class AppComponent {
inputName: any;
getInstance(e) {
this.inputName = e.component;
}
ngAfterViewInit() {
this.inputName.focus();
}
}
我还在本地和他们的Widget Gallery中发短信给这种方法。它不需要任何其他导入,并且可以正常工作。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句