web-dev-qa-db-ja.com

angular or angular 2 not angularjsでオートフォーカスを設定する方法

ディレクティブまたはHTMLオートフォーカスを作成して、angularjsに入力された入力にオートフォーカスを設定する方法に関する多くの投稿があります。angular（angular 2、angular 4など）

angularangular4
7
Aniruddha Das

Htmlに#nameitを追加して、コンポーネントコードで参照を取得します。

<input type="text" name="me" #nameit>

次に、自動水を入れます。

  @ViewChild('nameit') private elementRef: ElementRef;

  public ngAfterViewInit(): void {
    this.elementRef.nativeElement.focus();
  }
15
Aniruddha Das

Aniruddha Dasの答えは、場合によってはうまく機能します。ただし、これが必要な検証のあるテンプレートベースのフォームに適用されると、次のエラーが表示される場合があります。

ExpressionChangedAfterItHasBeenCheckedError：チェックされた後に式が変更されました。前の値： 'false'。現在の値： 'true'。

これに対する1つの解決策は、ngAfterViewInit（）の代わりにngInit（）内でfocus（）呼び出しをラップすることです。それで、アニドゥッダの答えを拡張します：

Htmlで、コンポーネントに#namedReferenceを追加します。

<input type="text"
    placeholder="Your full name"
    name="name"
    ngModel
    #fullName="ngModel"
    required
    #nameit>

次に、onNgInit（）を使用して、それにオートフォーカスを適用します。

@ViewChild('nameit') private elementRef: ElementRef;

ngOnInit() {
    this.elementRef.nativeElement.focus();
}
9
SuttonY
_<input id="name" type="text" #myInput />
{{ myInput.focus() }}
_

{{ myInput.focus() }}をテンプレートに追加します。

1
Sergey Gurin

最も具体的な回答の例は使用できますが、「非同期」呼び出しを行うためにsetTimeout内にフォーカスを置く必要がある場合があります。私の場合、angular material。のmat-autocompleteコンポーネントの選択されたフィルターにsetTimeoutを配置する必要があります。

私のコードはこんな感じ

   setTimeout(() => this.qtdeRef.nativeElement.focus());
0
Pedro Gabriel