[解決済み] Angular2 - コンポーネントロード時にテキストボックスにフォーカスを当てる
2023-07-15 22:41:03
質問
Angular2(Beta8)でコンポーネントを開発しています。このコンポーネントには、テキストボックスとドロップダウンがあります。私は、コンポーネントがロードされるとすぐに、またはドロップダウンの変更イベントでテキストボックスにフォーカスを設定したいと思っています。angular2でどのようにこれを実現するのでしょうか?以下はコンポーネントのHTMLです。
<div>
<form role="form" class="form-horizontal ">
<div [ngClass]="{showElement:IsEditMode, hidden:!IsEditMode}">
<div class="form-group">
<label class="control-label col-md-1 col-sm-1" for="name">Name</label>
<div class="col-md-7 col-sm-7">
<input id="name" type="text" [(ngModel)]="person.Name" class="form-control" />
</div>
<div class="col-md-2 col-sm-2">
<input type="button" value="Add" (click)="AddPerson()" class="btn btn-primary" />
</div>
</div>
</div>
<div [ngClass]="{showElement:!IsEditMode, hidden:IsEditMode}">
<div class="form-group">
<label class="control-label col-md-1 col-sm-1" for="name">Person</label>
<div class="col-md-7 col-sm-7">
<select [(ngModel)]="SelectedPerson.Id" (change)="PersonSelected($event.target.value)" class="form-control">
<option *ngFor="#item of PeopleList" value="{{item.Id}}">{{item.Name}}</option>
</select>
</div>
</div>
</div>
</form>
</div>
どのように解決するのですか?
この回答は、以下の記事から着想を得ています。 Angular 2:新しく追加された入力要素に焦点を当てる。
Angular2でHtml要素にフォーカスを設定する手順
-
ViewChildrenをComponentにインポートする
import { Input, Output, AfterContentInit, ContentChild,AfterViewInit, ViewChild, ViewChildren } from 'angular2/core';
-
フォーカスを設定したいhtmlのローカルテンプレート変数名を宣言します。
- 関数ngAfterViewInit()または他の適切なライフサイクルフックを実装します。
-
以下は、フォーカスを設定するために使用したコードの一部です。
ngAfterViewInit() {vc.first.nativeElement.focus()}
-
追加
#input
属性をアクセスしたいDOM要素に追加します。
///This is typescript
import {Component, Input, Output, AfterContentInit, ContentChild,
AfterViewChecked, AfterViewInit, ViewChild,ViewChildren} from 'angular2/core';
export class AppComponent implements AfterViewInit,AfterViewChecked {
@ViewChildren('input') vc;
ngAfterViewInit() {
this.vc.first.nativeElement.focus();
}
}
<div>
<form role="form" class="form-horizontal ">
<div [ngClass]="{showElement:IsEditMode, hidden:!IsEditMode}">
<div class="form-group">
<label class="control-label col-md-1 col-sm-1" for="name">Name</label>
<div class="col-md-7 col-sm-7">
<input #input id="name" type="text" [(ngModel)]="person.Name" class="form-control" />
</div>
<div class="col-md-2 col-sm-2">
<input type="button" value="Add" (click)="AddPerson()" class="btn btn-primary" />
</div>
</div>
</div>
<div [ngClass]="{showElement:!IsEditMode, hidden:IsEditMode}">
<div class="form-group">
<label class="control-label col-md-1 col-sm-1" for="name">Person</label>
<div class="col-md-7 col-sm-7">
<select [(ngModel)]="SelectedPerson.Id" (change)="PersonSelected($event.target.value)" class="form-control">
<option *ngFor="#item of PeopleList" value="{{item.Id}}">{{item.Name}}</option>
</select>
</div>
</div>
</div>
</form>
</div>
関連
-
[解決済み] コンポーネントテンプレートで要素を選択するには?
-
[解決済み] formControlNameとFormControlの違いは何ですか?
-
[解決済み] Angularでコンポーネントをリフレッシュする方法
-
[解決済み] Angular2の無効化ボタン
-
[解決済み] AngularでFormGroupに動的にaddControlを追加する
-
[解決済み] 64進数の文字列を角(2+)でエンコードおよびデコードする。
-
[解決済み] Angularで確認ダイアログを作る簡単な方法?
-
[解決済み] ng-forOf」は既知のネイティブプロパティではないため、バインドできない [重複] 。
-
[解決済み] 新しいAngularでngSrcに相当するものは何ですか?
-
[解決済み] Angular 2でコンポーネントの静的変数をHTMLにバインドする方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] angular-cliのパラメータ --base-href と --deploy-url の違いは何ですか?
-
[解決済み] trackBy` と `ngFor` の使い方
-
[解決済み] Angularで、コントロールが作成された後、FormControlにバリデータを追加する方法は?
-
[解決済み] angular-cli が HTTPS で ng serve するようにする。
-
[解決済み] FormGroupとFormArrayの使い分けは?
-
[解決済み] Angular2ルートでAngularの方法でパラメータを取得するには?
-
[解決済み] Angular2のテーブル行をコンポーネント化
-
[解決済み] の@ViewChildのreadパラメータは何ですか?
-
[解決済み] Angular 2でコンポーネントの静的変数をHTMLにバインドする方法は?
-
[解決済み] Angular 2 コンポーネントコンストラクタとOnInitの比較 [重複]。