[英]focus for ng-select not working Angular 5
我正在嘗試在 angular 5 中為 ng-select 使用焦點,但它不起作用
我正在使用ng2-select
如何在 Angular 5 中為 ng-select 使用焦點?
<label class="input">
<input (blur)="goTo()" type="text">
</label>
<label class="select" >
<div *ngIf="items.length > 0" >
<ng-select #select [items]="items">
</ng-select>
</div>
</label>
@ViewChild('select') myElement: ElementRef;
goTo(){
this.myElement.element.nativeElement.focus();
}
改變這個
goTo(){
this.myElement.element.nativeElement.focus();
}
對此,
import { ChangeDetectorRef } from '@angular/core';
constructor (private cRef: ChangeDetectorRef) {}
// import 'SelectComponent' from your library for 'ng2-select'
goTo(){
let el = null;
if (this.items.length > 0) {
this.cRef.detectChanges();
el = (this.myElement.nativeElement as SelectComponent).element.nativeElement.querySelector('div.ui-select-container > input');
if (el) { el.focus(); }
}
}
您可能需要檢查元素是否已定義(或者您是否需要在其中添加一個額外的“nativeElement”,但我基本上是在此處重用邏輯。
只是一個警告,如果庫更新以重命名這些類或修改模板,這可能不是一個穩定的修復。
希望能幫助到你。
快速回復,在此解決方案中,每個選擇元素都被記錄以備將來使用(在本例中為模糊)。 這需要根據您的情況進行調整。
import { Component, OnInit } from '@angular/core'; import { ViewChildren, QueryList } from '@angular/core'; @Component({ selector: 'app-editor', templateUrl: './editor.component.html', styleUrls: ['./editor.component.css'] }) export class EditorComponent implements AfterViewInit { // Viewchildren // https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e myindex:number; @ViewChildren("select") inputs: QueryList<any> constructor() { this.myindex=0 } // You will have to setup some input parameters in this function in order to switch to the right "select", (you have control) private goTo() { // focus next input field if (this.myindex +1 < this.inputs.toArray().length) { this.inputs.toArray()[this.myindex +1].nativeElement.focus(); this.myindex = this.myindex + 1; } else { this.inputs.toArray()[0].nativeElement.focus(); this.myindex = 0; } } private processChildren(): void { console.log('Processing children. Their count:', this.inputs.toArray().length) } ngAfterViewInit() { console.log("AfterViewInit"); console.log(this.inputs); this.inputs.forEach(input => console.log(input)); // susbcribe to inputs changes, each time an element is added (very optional feature ...) this.inputs.changes.subscribe(_ => this.processChildren() // subsequent calls to processChildren ); } }
這對我來說很好用
@ViewChild('ngSelect') ngSelect: NgSelectComponent;
ngAfterViewInit() {
if (this.autofocus) {
setTimeout(() => {
this.ngSelect.focus();
});
}
}
一個簡單的方法,你也可以這樣做。
<label class="input">
<input (blur)="goTo(select)" type="text">
</label>
<label class="select">
<div *ngIf="items.length > 0">
<ng-select #select [items]="items">
</ng-select>
</div>
</label>
並在打字稿文件中。
goTo(select){
select.focus();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.