角2 - 要素にフォーカスを設定

Question

私は非同期/ http呼び出しを持っており、async呼び出しの結果がエラーの場合、テンプレートのエラー要素にフォーカスを設定します。

• 一つの方法は、ElementRefを注入した後の要素にアクセスし、その上にフォーカス（）メソッドを呼び出すjQueryのを使用することができます。

  class MyComponent { 
   
      
   
      constructor(private element: ElementRef) {} 
   
  
   
      doAsync() { 
   
       // do something async 
   
  
   
       $(this.element.nativeElement).find('.error').focus(); 
   
      } 
   
  }
別の方法は、モデルのプロパティに結合し、ホスト要素上 フォーカス（）メソッドを呼び出す指令を作成することができます。

角度2にJQueryを組み込む/使用するのはどれくらい良いですか？

また、Angularが動作させる方法（MV *）は、 'のビューを変更するモデルはになります'と考えています。それで、どちらが正しい方法ですか？

Answer 1

は

import --> AfterViewInit 

export class YourComponent implements AfterViewInit { 
    @ViewChild('err') vc: any; 


    ngAfterViewInit() { 
    this.vc.nativeElement.focus(); 
    } 
} 

使用あなたがに集中しようとしている要素のどのようなタイプの、このコンポーネントのhtml

<div #err class="alert alert-danger>{{errorPrompt}}</div> 

Answer 2

あなたはクラスの角ディレクティブを使用することができます。

<component1 [ngClass]="{focusClass: setFocus() }"></component1> 

は、setFocusは、（）でプロパティを設定し、あなたの非同期関数の結果では、タグ

Answer 3

に焦点を置く真のアクティブなクラスを返す場合コンポーネントを使用してエラーメッセージを表示または非表示にします。で

class MyComponent { 

    hasErrors = false; 
    errorPrompt = ""; 

    constructor() {} 

    doAsync() { 
     // do something async 
     this.hasErrors = true; 
     this.errorPrompt = "Fix the errors."; 
    } 
} 

マークアップ：

<div class="alert alert-danger" *ngIf="hasErrors">{{errorPrompt}}</div> 

Answer 4

要素 '.ERROR' の種類があるが、あなたはこのような何かを試みることができる全くわからない：私はしました

class MyComponent { 

    constructor(private renderer: Renderer2) { } 

    doAsync() { 
     // do something async 

     setTimeout(() => { 
      const element = this.renderer.selectRootElement('.error'); 
      if (element) { 
       element.focus(); 
      } 
     }, 200); 
    } 

} 

を要素が* ngIfにネストされていると、setTimeoutが見つかることがあります。最もクリーンなソリューションではありませんが、少なくともjqueryを含めるよりも優れています。オートフォーカスリファレンスのための独自の指示を定義することもできます。