primeng：专注于控制

Question

抱歉这个noob问题...

使用primeng pack时，建议在控件上设置焦点的方法是什么？当使用传统的输入控件时，我设置了一个表单变量（#variable）并使用@ViewChild来获取它的引用，以便我可以访问它的原生元素：

this._variable.nativeElement.focus();

使用primeng的一个控件时如何才能这样做？

感谢。

路易斯

Answer 1

我使用autofocus关键字：

<input type="text" size="15" pInputText class="form-control"
       formControlName="email" autofocus/>

Answer 2

TLDR：这取决于控件本身和周围的html。您需要如何执行此操作。

因此，对于PrimeNG控件而言，答案似乎因您要专门针对哪个控件而有所不同，并且如果控件包装在* ngIf中，则它将变得更加复杂。

到目前为止，我仅使用两个控件来完成此操作，它们非常不同。

在所有情况下，您都需要使用带有适当标记的html的@ViewChild来获取控件：

带有ngIf的HTML：

<div *ngIf="something">
<p-dropdown #dropdown></p-dropdown>
</div>

没有ngIf的HTML：

<p-calendar #theCalendar></p-calendar>

@ViewChild和ngIf：

@ViewChild('dropdown') set content(content: Dropdown) {
    console.log('dropdown set', content);
    this.dropdown = content;
}

没有ngIf的@ViewChild：

@ViewChild('theCalendar') public calendar: Calendar;

然后，您可以在ngOnInit块中设置焦点。

对于* ng-if / dropdown情况，是：

this.changeDetector.detectChanges();
if (this.dropdown) {
    this.dropdown.applyFocus();
}

（更改检测器处理* ng-if ...否则applyFocus是关键部分）。

对于不在* ng-if块中的p日历控件，它看起来像这样：

window.setTimeout(() => {
    console.log('setting focus now');
    this.calendar.inputfieldViewChild.nativeElement.focus();
}, 10);

请注意，在这种情况下，您需要执行window.setTimeout来等待内部元素的填充，以便可以使用它们来调用focus方法。对于日历控件本身，要设置焦点，您需要访问inputfieldViewChild。

最终，您将需要根据个人情况将上述内容进行某种组合。希望这会帮助您。