要实现每次打开p-dialog时都聚焦在输入框上,可以使用Angular的ViewChild装饰器来获取对话框中的输入框元素,并在对话框打开时聚焦该输入框。
首先,在对话框组件中,使用ViewChild装饰器获取到输入框的引用。假设输入框的模板变量名为"inputField",可以这样写:
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { Dialog } from 'primeng/dialog';
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.css']
})
export class DialogComponent implements AfterViewInit {
@ViewChild('inputField') inputField: any;
constructor(private dialog: Dialog) {}
ngAfterViewInit() {
this.dialog.onShow.subscribe(() => {
this.inputField.nativeElement.focus();
});
}
}
然后,在对话框的HTML模板中,给输入框添加模板变量名"inputField":
最后,在使用对话框的组件中,调用对话框的show()方法来打开对话框:
import { Component, ViewChild } from '@angular/core';
import { Dialog } from 'primeng/dialog';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(Dialog) dialog: any;
openDialog() {
this.dialog.show();
}
}
这样,每次打开对话框时,输入框都会自动聚焦。