PrimeNG 多选自动对焦
PrimeNG Multiselect autofocus
在 Angular v7 项目中使用 PrimgNG v7.1.3。
在一个简单的组件中实现了多选 (https://www.primefaces.org/primeng-7.1.3/#/multiselect)。
需要在页面加载时设置焦点。
以下解决方案适用于下拉但不适用于多选:
在HTML中:
<p-dropdown #someDropdown></p-dropdown>
在组件中:
import { Dropdown } from 'primeng/dropdown';
@ViewChild('someDropdown') someDropdown: Dropdown;
this.someDropdown.applyFocus();
但是对于Multiselect,它会抛出这样的方法无效的错误。
尝试了此 SO link 中提到的“控制在 ngIf 内”的第一个答案,仍然没有运气:primeng: Setting focus on control
也查看了 PrimeNG 文档和用户指南,但没有提及对焦功能。
后来也在下面试过。 None 有效。
this.someMultiSelect.focus();
this.someMultiSelect.applyFocus();
this.someMultiSelect.el.focus();
this.someMultiSelect.el.applyFocus();
this.someMultiSelect.el.nativeElement.focus();
this.someMultiSelect.el.nativeElement.applyFocus();
this.someMultiSelect.containerViewChild.focus();
this.someMultiSelect.containerViewChild.applyFocus();
this.someMultiSelect.containerViewChild.nativeElement.focus();
this.someMultiSelect.containerViewChild.nativeElement.applyFocus();
Stackblitz:https://stackblitz.com/edit/primeng-multiselect-autofocus
求推荐。
感谢任何帮助。
您可以通过 ViewChild
获取元素并使用此技巧使其突出显示。
像这样:
组件
import { MultiSelect } from 'primeng/multiselect';
export class AppComponent implements AfterViewInit {
name = 'Angular';
@ViewChild('someDropdown') someDropdown: MultiSelect; // <--- you need to import this from PrimeNG Library
ngAfterViewInit() {
setTimeout(() => {
this.someDropdown.containerViewChild.nativeElement.click();
this.someDropdown.hide();
}, 300);
}
这是 Stackblitz 示例:
https://stackblitz.com/edit/ngprime-multiselect-efpy6z?embed=1&file=src/app/app.component.ts
在 Angular v7 项目中使用 PrimgNG v7.1.3。
在一个简单的组件中实现了多选 (https://www.primefaces.org/primeng-7.1.3/#/multiselect)。
需要在页面加载时设置焦点。
以下解决方案适用于下拉但不适用于多选:
在HTML中:
<p-dropdown #someDropdown></p-dropdown>
在组件中:
import { Dropdown } from 'primeng/dropdown';
@ViewChild('someDropdown') someDropdown: Dropdown;
this.someDropdown.applyFocus();
但是对于Multiselect,它会抛出这样的方法无效的错误。
尝试了此 SO link 中提到的“控制在 ngIf 内”的第一个答案,仍然没有运气:primeng: Setting focus on control
也查看了 PrimeNG 文档和用户指南,但没有提及对焦功能。
后来也在下面试过。 None 有效。
this.someMultiSelect.focus();
this.someMultiSelect.applyFocus();
this.someMultiSelect.el.focus();
this.someMultiSelect.el.applyFocus();
this.someMultiSelect.el.nativeElement.focus();
this.someMultiSelect.el.nativeElement.applyFocus();
this.someMultiSelect.containerViewChild.focus();
this.someMultiSelect.containerViewChild.applyFocus();
this.someMultiSelect.containerViewChild.nativeElement.focus();
this.someMultiSelect.containerViewChild.nativeElement.applyFocus();
Stackblitz:https://stackblitz.com/edit/primeng-multiselect-autofocus
求推荐。
感谢任何帮助。
您可以通过 ViewChild
获取元素并使用此技巧使其突出显示。
像这样:
组件
import { MultiSelect } from 'primeng/multiselect';
export class AppComponent implements AfterViewInit {
name = 'Angular';
@ViewChild('someDropdown') someDropdown: MultiSelect; // <--- you need to import this from PrimeNG Library
ngAfterViewInit() {
setTimeout(() => {
this.someDropdown.containerViewChild.nativeElement.click();
this.someDropdown.hide();
}, 300);
}
这是 Stackblitz 示例:
https://stackblitz.com/edit/ngprime-multiselect-efpy6z?embed=1&file=src/app/app.component.ts