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?
Antwort
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>
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
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>
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.
- 1. Element Fokus mit Angular Material 2 und SideNav
- 2. Angular 2 Material: sidenav Fokus auf den ersten Navigationspunkt
- 3. Fokus auf Formular setzen
- 4. Fokus auf ein Uifiguren-Fenster setzen
- 5. Fokus auf ein Popup-Steuerelement textInput setzen
- 6. Fokus auf ein .NET UserControl setzen ...?
- 7. Den Fokus auf ein MsgBox-Objekt setzen
- 8. Kann Fokus() nicht auf ein Textfeld setzen
- 9. Eine einfache Möglichkeit, den Fokus auf ein Feld in Angular
- 10. Angular Tooltip auf Fokus
- 11. Angular 2 - Wählen Sie ein Objekt aus dem DOM und setzen Sie den Fokus
- 12. Fokus auf Iframe-Inhalt setzen
- 13. jQuery Fokus auf ein Element, dann ein anderer sofort nach
- 14. Fokus auf eine Schaltfläche setzen
- 15. Angular 2 Klick auf später platziert Element
- 16. Fokus auf eine TextBox in UWP setzen
- 17. Wie Fokus auf anderes Element, während Sie auf ein Anker-Tag setzen mit href
- 18. Fokus-Einstellung auf ein HTML-Element in Internet Explorer
- 19. Eckiger 2/4 Satz Fokus auf Eingabeelement
- 20. Fokus auf dynamische Liste setzen (Angularjs Weg)
- 21. Angular 2 Fokus auf ersten ungültigen Eingang nach Click/Event
- 22. Konnte den Fokus auf ListView nicht setzen
- 23. Angular 2: collapse mehrere Element
- 24. Angular JS - Fokus auf dynamisch erstelltes Textfeld
- 25. Setzen Sie den Fokus auf ein Pop-up mit Musikwiedergabe
- 26. Bootstrap Angular 2 auf DOM-Element wie in Angular 1
- 27. wie Cursor Fokus auf Textbox setzen?
- 28. angular 2 aktuelles Element ersetzen
- 29. Clojurescript re-frame: Fokus auf ein neu erstelltes Element ändern
- 30. entfernen span-Element auf Fokus
Welche Art von Element sind Sie auf das konzentrieren versuchen? – MichaelSolati
@MichaelSolati Jede Fehlermeldung, sagen Bootstrap Alarm '
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