Ich entwickle eine Komponente in Angular2 (Beta 8). Die Komponente verfügt über ein Textfeld und eine Dropdown-Liste. Ich möchte den Fokus im Textfeld setzen, sobald die Komponente geladen wird oder wenn sich das Dropdown-Ereignis ändert. Wie würde ich das in angle2 erreichen? Es folgt HTML für die Komponente.
<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>
Diese Antwort ist inspiriert von Post Angular 2: Fokus auf neu hinzugefügtes Eingabeelement
Schritte zum Festlegen des Fokus auf das HTML-Element in Angular2
Importieren Sie ViewChildren in Ihre Komponente
Deklarieren Sie den Namen der lokalen Vorlagenvariablen für das HTML, für das Sie den Fokus festlegen möchten
Es folgt der Code, mit dem ich den Fokus eingestellt habe
Fügen Sie
#input
dem DOM-Element, auf das Sie zugreifen möchten, ein Attribut hinzu.///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>
quelle
ChangeDetectorRef
in den Konstruktor aufnehmen und dannthis.cd.detectChanges();
nach dem Fokusaufruf gemäß dieser Antwort von @jspassov aufrufen .Dies ist der beste und einfachste Weg, da der Code "myInput.focus ()" nach der Erstellung der Eingabe ausgeführt wird
quelle
In der ursprünglichen Frage wurde nach einer Möglichkeit gefragt, den Fokus zunächst oder später als Reaktion auf ein Ereignis festzulegen. Der richtige Weg, dies zu erreichen, scheint darin zu bestehen, eine Attributanweisung zu erstellen, die für jedes Eingabeelement festgelegt werden kann, und dann ein benutzerdefiniertes Ereignis zu verwenden, um die Fokusmethode für dieses Eingabeelement sicher auszulösen. Erstellen Sie dazu zunächst die Direktive:
Beachten Sie, dass renderer.invokeElementMethod für das nativeElement verwendet wird, das für Webworker sicher ist. Beachten Sie auch, dass focusEvent als Eingabe deklariert ist.
Fügen Sie dann die folgenden Deklarationen zur Angular 2-Komponente hinzu, die die Vorlage enthält, in der Sie die neue Direktive verwenden möchten, um den Fokus auf ein Eingabeelement zu setzen:
Vergessen Sie nicht, EventEmitter wie folgt über die Komponente zu importieren:
Legen Sie in der Vorlage für diese Komponente das neue Attribut [focus] wie folgt fest:
Importieren und deklarieren Sie schließlich in Ihrem Modul die neue Direktive wie folgt:
Um es noch einmal zusammenzufassen: Die Funktion ngAfterViewInit bewirkt, dass der neue EventEmitter ausgegeben wird. Da wir diesen Emitter dem Attribut [focus] im Eingabeelement in unserer Vorlage zugewiesen haben, haben wir diesen EventEmitter als Eingabe für die neue Direktive deklariert und den Fokus aufgerufen Methode in der Pfeilfunktion, die wir an das Abonnement für dieses Ereignis übergeben haben, erhält das Eingabeelement nach der Initialisierung der Komponente und bei jedem Aufruf von setFocus den Fokus.
Ich hatte das gleiche Bedürfnis in meiner eigenen App, und dies funktionierte wie angekündigt. Vielen Dank an: http://blog.thecodecampus.de/angular-2-set-focus-element/
quelle
setFocus
Funktion nicht verwendetInformationen zum Festlegen des Fokus finden Sie unter Winkel 2: Fokus auf neu hinzugefügtes Eingabeelement .
Verwenden Sie für "On Load" den
ngAfterViewInit()
Lifecycle Callback.quelle
Ich hatte ein etwas anderes Problem. Ich habe mit Eingaben in einem Modal gearbeitet und es hat mich verrückt gemacht. Keine der vorgeschlagenen Lösungen hat bei mir funktioniert.
Bis ich dieses Problem gefunden habe: https://github.com/valor-software/ngx-bootstrap/issues/1597
Dieser gute Kerl gab mir den Hinweis, dass ngx-bootstrap modal eine Fokuskonfiguration hat. Wenn diese Konfiguration nicht auf false gesetzt ist, wird das Modal nach der Animation fokussiert und es gibt KEINE MÖGLICHKEIT, etwas anderes zu fokussieren.
Aktualisieren:
Fügen Sie dem modalen div das folgende Attribut hinzu, um diese Konfiguration festzulegen:
Update 2:
Um den Fokus auf das Eingabefeld zu erzwingen, habe ich eine Direktive geschrieben und den Fokus in jedem AfterViewChecked-Zyklus festgelegt, solange das Eingabefeld die Klasse ng-unberührt hat.
quelle
Es kann auch dynamisch so gemacht werden ...
quelle
[autofocus]="false"
Direktive für das erste Feld des Autofokus
import { Directive, ElementRef, AfterViewInit } from "@angular/core"; @Directive({ selector: "[appFocusFirstEmptyInput]" }) export class FocusFirstEmptyInputDirective implements AfterViewInit { constructor(private el: ElementRef) {} ngAfterViewInit(): void { const invalidControl = this.el.nativeElement.querySelector(".ng-untouched"); if (invalidControl) { invalidControl.focus(); } } }
quelle
Ich hatte mit vielen dieser Lösungen in allen Browsern nicht viel Glück. Dies ist die Lösung, die für mich funktioniert hat.
Für Routerwechsel:
Dann
ngAfterViewInit()
für das Onload-Szenario.quelle
Sie können $ (jquery) verwenden:
dann in ts:
quelle