5


在 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 链接中提到的“ngIf 中的控制”的第一个答案，仍然没有运气：primeng：将焦点设置在控制上
也检查了 PrimeNG 文档和用户指南，但没有提及聚焦功能。

后来也在下面尝试。都没有奏效。

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

请建议。

任何帮助表示赞赏。

4

1 回答 1

3

您可以通过获取元素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

于 2020-07-21T08:08:09.477 回答