2017-06-09 20 views
1

Ich habe einen async/http-Aufruf und möchte den Fokus auf ein Fehlerelement in der Vorlage setzen, wenn der asynchrone Aufruf fehlerhaft ist.Angular 2 - Fokus auf ein Element setzen

  • Ein Weg kann sein, den ElementRef einzuspritzen und dann verwenden JQuery Element zugreifen und darauf focus() Methode aufrufen.

class MyComponent { 
 
    
 
    constructor(private element: ElementRef) {} 
 

 
    doAsync() { 
 
     // do something async 
 

 
     $(this.element.nativeElement).find('.error').focus(); 
 
    } 
 
}

  • Eine weitere Möglichkeit, eine Richtlinie erstellen können, die auf Modell auf eine Eigenschaft bindet und ruft focus() Methode auf dem Host-Element.

Wie gut ist es, JQuery in angular 2 einzubinden/zu verwenden?

Auch ich glaube, die Art und Weise, die Angular soll funktionieren (MV *) ist 'Modell zu ändern, auf die Ansicht reagiert'. Also, welcher ist der richtige Weg es zu tun?

+0

Welche Art von Element sind Sie auf das konzentrieren versuchen? – MichaelSolati

+0

@MichaelSolati Jede Fehlermeldung, sagen Bootstrap Alarm '

+0

Da Sie eine Klasse zielen und weil die Klasse an mehreren Orten verwendet werden kann, wäre es ziemlich schmutzig jedes einzelne Element mit dieser Klasse zu zielen. Beachten Sie, dass Sie eine bedingte Anweisung ausführen können, um die Klasse anzuzeigen, wenn eine Bedingung erfüllt ist. – MichaelSolati

Antwort

7

Lassen Sie uns versuchen, diese in Ihren Fokus Komponente

import --> AfterViewInit 

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


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

Verwendung dieser Komponente html

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

können Sie Winkel Richtlinie der Klasse verwenden:

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

wenn setFocus() return true aktiv die Klasse, die den Fokus in dem Tag

+0

Was ist focusClass? – a3uge

+0

focusClass ist eine CSS-Klasse, in der Sie den Fokus definieren, nicht jQuery verwenden – alehn96

+0

Aber ist nicht der Punkt, um tatsächlich auf das Element zu konzentrieren, nicht die Benutzeroberfläche mit einigen CSS-Klassen zu manipulieren? –

0

Im Ergebnis Ihrer Asynchron-Funktion eine Eigenschaft auf das setzen Komponente, um die Fehlermeldung anzuzeigen oder auszublenden.

class MyComponent { 

    hasErrors = false; 
    errorPrompt = ""; 

    constructor() {} 

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

In der Auszeichnungs:

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

Nicht ganz sicher, welche Art von Element '.error' ist, aber man könnte so etwas wie dies versuchen:

class MyComponent { 

    constructor(private renderer: Renderer2) { } 

    doAsync() { 
     // do something async 

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

} 

Ich habe found setTimeout ist manchmal notwendig, wenn das Element in einem * ngIf verschachtelt ist. Obwohl es nicht die sauberste Lösung ist, ist es zumindest besser als jQuery. Sie können auch eine eigene Direktive für eine Autofokusreferenz definieren.

Verwandte Themen