pasar - Angular2: enfocar un cuadro de texto en la carga de componentes

pasar parametros entre componentes angular 4

Question

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 caso de cambio de 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>

Answer 1

Además, se puede hacer dinámicamente así ...

<input [id]="input.id" [type]="input.type" [autofocus]="input.autofocus" />

Donde la entrada es

const input = {
  id: "my-input",
  type: "text",
  autofocus: true
};

Answer 2

Consulte Angular 2: Centrarse en el elemento de entrada recién agregado para saber cómo establecer el foco.

Para "en carga", use la devolución de llamada del ciclo de vida ngAfterViewInit() .

Answer 3

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>

http://www.w3schools.com/TAgs/att_input_autofocus.asp

Answer 4

Esta respuesta está inspirada en Post Angular 2: enfóquese en el elemento de entrada recién agregado

Pasos para establecer el foco en el elemento Html en Angular2

1. Importe ViewChildren en su Componente

   import { Input, Output, AfterContentInit, ContentChild,AfterViewInit, ViewChild, ViewChildren } from ''angular2/core'';

2. Declare el nombre de la variable de plantilla local para el html para el que desea establecer el foco

3. Implemente la función ngAfterViewInit () u otros ganchos de ciclo de vida apropiados

4. El siguiente es el fragmento de código que utilicé para establecer el foco

   ngAfterViewInit() {vc.first.nativeElement.focus()}

5. 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>

Answer 5

La pregunta original pedía una forma de establecer el foco inicialmente, O de establecer el foco más tarde, en respuesta a un evento. Parece que la forma correcta de abordar esto es hacer una directiva de atributo que se pueda establecer para cualquier elemento de entrada, y luego usar un evento personalizado para activar de forma segura el método de enfoque en este elemento de entrada. Para hacerlo, primero cree la directiva:

import { Directive, Input, EventEmitter, ElementRef, Renderer, Inject } from ''@angular/core'';

@Directive({
    selector: ''[focus]''
})
export class FocusDirective {
    @Input(''focus'') focusEvent: EventEmitter<boolean>;

    constructor(@Inject(ElementRef) private element: ElementRef, private renderer: Renderer) {
    }

    ngOnInit() {
        this.focusEvent.subscribe(event => {
            this.renderer.invokeElementMethod(this.element.nativeElement, ''focus'', []);
        });
    }
}

Tenga en cuenta que utiliza renderer.invokeElementMethod en nativeElement, que es seguro para los trabajadores web. Observe también que focusEvent se declara como una entrada.

Luego agregue las siguientes declaraciones al componente Angular 2 que tiene la plantilla donde desea usar la nueva directiva para establecer el foco en un elemento de entrada:

public focusSettingEventEmitter = new EventEmitter<boolean>();

ngAfterViewInit() { // ngOnInit is NOT the right lifecycle event for this.
    this.focusSettingEventEmitter.emit(true);
}
setFocus(): void {
  this.focusSettingEventEmitter.emit(true);
}

No olvide importar EventEmitter sobre el componente de esta manera:

import { Component, EventEmitter } from ''@angular/core'';

y en la plantilla para este componente, establezca el nuevo atributo [foco] como este:

<input id="name" type="text" name="name" 
    [(ngModel)]="person.Name" class="form-control"
    [focus]="focusSettingEventEmitter">

Finalmente, en su módulo, importe y declare la nueva directiva como esta:

import { FocusDirective } from ''./focus.directive'';

@NgModule({
    imports: [ BrowserModule, FormsModule ],
    declarations: [AppComponent, AnotherComponent, FocusDirective ],
    bootstrap: [ AppComponent ]
})

Para recapitular: la función ngAfterViewInit hará que se emita el nuevo EventEmitter, y dado que asignamos este emisor al atributo [focus] en el elemento de entrada en nuestra plantilla, declaramos este EventEmitter como una entrada a la nueva directiva e invocamos el foco En el método de la flecha que pasamos a la suscripción a este evento, el elemento de entrada recibirá el foco después de que se inicialice el componente y cada vez que se llame a setFocus.

Tenía la misma necesidad en mi propia aplicación, y esto funcionó según lo anunciado. Muchas gracias a los siguientes: http://blog.thecodecampus.de/angular-2-set-focus-element/

Answer 6

No tuve mucha suerte con muchas de estas soluciones en todos los navegadores. Esta es la solución que funcionó para mí.

Para cambios de enrutador:

router.events.subscribe((val) => {
    setTimeout(() => {
        if (this.searchElement) {
            this.searchElement.nativeElement.focus();
        }
    }, 1);
})

Luego ngAfterViewInit() para el escenario de ngAfterViewInit() .

Answer 7

Tuve un problema un poco diferente. Trabajé con entradas en un modal y me volvió loco. Ninguna de las soluciones propuestas funcionó para mí.

Hasta que encontré este problema: https://github.com/valor-software/ngx-bootstrap/issues/1597

Este buen chico me dio la pista de que ngx-bootstrap modal tiene una configuración de enfoque. Si esta configuración no se establece en falso, el modal se enfocará después de la animación y NO HAY MANERA de enfocar cualquier otra cosa.

Actualizar:

Para establecer esta configuración, agregue el siguiente atributo al div modal:

[config]="{focus: false}"

Actualización 2:

Para forzar el foco en el campo de entrada, escribí una directiva y configuré el foco en cada ciclo AfterViewChecked siempre que el campo de entrada tenga la clase ng intacta.

 ngAfterViewChecked() {
    // This dirty hack is needed to force focus on an input element of a modal.
    if (this.el.nativeElement.classList.contains(''ng-untouched'')) {
        this.renderer.invokeElementMethod(this.el.nativeElement, ''focus'', []);
    }
}

Answer 8

<input id="name" type="text" #myInput />
{{ myInput.focus() }}

esta es la mejor y más simple manera, porque el código "myInput.focus ()" se ejecuta después de la entrada creada