Estoy desarrollando un componente en Angular2 (Beta 8). El componente tiene un cuadro de texto y un menú desplegable. Me gustaría establecer el foco en el cuadro de texto tan pronto como se cargue el componente o en el evento de cambio del menú desplegable. ¿Cómo lograría esto en angular2. Lo siguiente es Html para el componente.
<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>El uso del atributo HTML5 de autofocus simple funciona para el escenario 'en carga'
<input autofocus placeholder="enter text" [(ngModel)]="test">o
<button autofocus (click)="submit()">Submit</button>Esta respuesta está inspirada en la publicaciónAngular 2: concéntrese en el elemento de entrada recién agregado
Pasos para establecer el foco en el elemento Html en Angular2
Importar ViewChildren en su Componente
import { Input, Output, AfterContentInit, ContentChild,AfterViewInit, ViewChild, ViewChildren } from 'angular2/core';Declare el nombre de la variable de plantilla local para el html para el que desea establecer el foco
El siguiente es el fragmento de código que utilicé para establecer el enfoque.
ngAfterViewInit() {vc.first.nativeElement.focus()} Agregue el atributo #input al elemento DOM al que desea acceder.
///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><input id="name" type="text" #myInput /> {{ myInput.focus() }}esta es la forma mejor y más sencilla, porque el código "myInput.focus()" se ejecuta después de crear la entrada
ADVERTENCIA: esta solución es aceptable solo si tiene un solo elemento en el formulario (el usuario no podrá seleccionar otros elementos)