jqueryでng-selectを選択する

Question

私のページの最初のコントロールは、ページが最初に読み込まれたときに入力フォーカスを持っている必要があります。残念ながら、私の場合、コントロールはng-selectです。

だから、どこかで私のAng2テンプレートで：私のngAfterViewInitで

<ng-select id="mySelect" class="form-control" [options]="_myOptions" [(ngModel)]="model.SelectId" *ngIf=initDone' name=" mySelect" style="z-index: 10"> 
</ng-select> 

、私が持っている：

$("#mySelect > div").focus(); 
$("#mySelect > div").select(); 

が

可哀想に（また、div要素をドロップしようとした）、これが動作しません。

注： これは、「AngularJSの要素にデフォルトフォーカスを置く最も簡単な方法は何ですか？」とは異なります。その質問は入力コントロールを参照しているので、基本的なjquery focus/selectが機能します。これは特にng-select（束の子divとしてレンダリングする）を指しています。

Answer 1

あなたはjQueryのなしでそれを行うことができます：

@ViewChild('yourFieldReference') fieldRefName: ElementRef; 
 

 
. 
 
. 
 
. 
 
. 
 

 
ngOnInit() { 
 
this.fieldRefName.nativeElement.focus(); 
 
}

<input #yourFieldReference id="fieldID">

私はinputでそれをやったが、あなたは、このコードは私のために働いた任意のHTML要素タグ

Answer 2

でそれを行うことができます、これを試してください

<ng-select #myInput id="mySelect" class="form-control" [options]="_myOptions" [(ngModel)]="model.SelectId" *ngIf=initDone' name=" mySelect" style="z-index: 10"> 
</ng-select> 

で、component.tsには、ビューチャイルドとレンダラーを使用して要素を取得します。 AfterViewInitは、HTMLがレンダリングされた後にフォーカスを合わせるのに役立ちます。 （のOnInit乗った問題（）、その理由）

import {ViewChild, Component, AfterViewInit, ElementRef, Renderer} from 'angular2/core'; 

export class App { 
    @ViewChild('myInput') selectFocus:ElementRef; 

    constructor(private _renderer : Renderer) { 

    } 

    public ngAfterViewInit() { 
    this._renderer.invokeElementMethod(this.selectFocus.nativeElement, 'focus', []); 
    } 
}