Question

我正在尝试将焦点用于角度5中的ng-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();
    }

Answer 1

更改此

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'，但我基本上是在重用here中的逻辑。

请注意，尽管库更新以重命名这些类或修改模板，但这可能不是一个稳定的修复程序。

希望有帮助。

Answer 2

快速答复，在此解决方案中，记录了每个选择的元素以供将来使用（在这种情况下为模糊）。这需要适应您的情况。

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
  );
}


  

}

Answer 3

这对我来说很好

@ViewChild('ngSelect') ngSelect: NgSelectComponent;
ngAfterViewInit() {
        if (this.autofocus) {
            setTimeout(() => {
                this.ngSelect.focus();
            });
        }
    }

推荐https://github.com/ng-select/ng-select/issues/762

Answer 4

一种简单的方法，您也可以这样做。

<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();
}

ng-select的焦点不起作用Angular 5

4 个答案: