navigationend - Elemento de entrada de enfoque automático Angular2+

router events angular 6

Question

¿Cómo puedo autoenfocar el elemento de entrada? Similar a this pregunta, pero no con AngularDart. Algo como esto:

<input type="text" [(ngModel)]="title" [focus] />
//or 
<input type="text" [(ngModel)]="title" autofocus />

¿Tiene Angular2 alguna versión compatible con esta característica?

La mejor pregunta cercana es esta , pero ¿hay alguna solución más corta / más fácil, ya que no tengo "lista de cuadros de entrada"? En el enlace proporcionado *ngFor="#input of inputs" se usa, pero solo tengo 1 entrada en la plantilla de control.

Answer 1

Este es mi código actual:

import { Directive, ElementRef, Input } from "@angular/core";

@Directive({
    selector: "[autofocus]"
})
export class AutofocusDirective
{
    private focus = true;

    constructor(private el: ElementRef)
    {
    }

    ngOnInit()
    {
        if (this.focus)
        {
            //Otherwise Angular throws error: Expression has changed after it was checked.
            window.setTimeout(() =>
            {
                this.el.nativeElement.focus(); //For SSR (server side rendering) this is not safe. Use: https://github.com/angular/angular/issues/15008#issuecomment-285141070)
            });
        }
    }

    @Input() set autofocus(condition: boolean)
    {
        this.focus = condition !== false;
    }
}

caso de uso:

[autofocus] //will focus
[autofocus]="true" //will focus
[autofocus]="false" //will not focus

Código obsoleto (respuesta anterior, por si acaso):
Terminé con este código:

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

@Directive({
    selector: ''[autofocus]''
})
export class Autofocus
{
    constructor(private el: ElementRef, private renderer: Renderer)
    {        
    }

    ngOnInit()
    {        
    }

    ngAfterViewInit()
    {
        this.renderer.invokeElementMethod(this.el.nativeElement, ''focus'', []);
    }
}

Si pongo el código en ngOnViewInit , no funciona. El código también usa las mejores prácticas, ya que no se recommended llamar al elemento directamente.

Editado (autofocus condicional):
Hace unos días necesité el enfoque automático condicional, porque oculté el primer elemento de enfoque automático y deseo enfocar otro, pero solo cuando el primero no está visible, y terminé con este código:

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

@Directive({
    selector: ''[autofocus]''
})
export class AutofocusDirective
{
    private _autofocus;
    constructor(private el: ElementRef, private renderer: Renderer)
    {
    }

    ngOnInit()
    {
    }

    ngAfterViewInit()
    {
        if (this._autofocus || typeof this._autofocus === "undefined")
            this.renderer.invokeElementMethod(this.el.nativeElement, ''focus'', []);
    }

    @Input() set autofocus(condition: boolean)
    {
        this._autofocus = condition != false;
    }
}

Edited2:
Renderer.invokeElementMethod está en desuso y el nuevo Renderer2 no lo admite. Así que volvemos al enfoque nativo (¡que no funciona fuera de DOM - SSR, por ejemplo!).

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

@Directive({
    selector: ''[autofocus]''
})
export class AutofocusDirective
{
    private _autofocus;
    constructor(private el: ElementRef)
    {
    }

    ngOnInit()
    {
        if (this._autofocus || typeof this._autofocus === "undefined")
            this.el.nativeElement.focus();      //For SSR (server side rendering) this is not safe. Use: https://github.com/angular/angular/issues/15008#issuecomment-285141070)
    }

    @Input() set autofocus(condition: boolean)
    {
        this._autofocus = condition != false;
    }
}

caso de uso:

[autofocus] //will focus
[autofocus]="true" //will focus
[autofocus]="false" //will not focus

Answer 2

La siguiente directiva funciona para mí usando Angular 4.0.1

import {Directive, ElementRef, AfterViewInit} from ''@angular/core'';

@Directive({
  selector: ''[myAutofocus]''
})
export class MyAutofocusDirective implements AfterViewInit {
  constructor(private el: ElementRef)
  {
  }
  ngAfterViewInit()
  {
    this.el.nativeElement.focus();
  }
}

Úselo así:

<md-input-container>
    <input mdInput placeholder="Item Id" formControlName="itemId" name="itemId" myAutofocus>
</md-input-container>

La opción de usar el evento de ciclo de vida OnInit no funcionó para mí. También intenté usar el Renderer en la otra respuesta que no funcionó para mí.

Answer 3

Podría asignar al elemento de entrada una variable de referencia de plantilla #myInput :

<input type="text" [(ngModel)]="title" #myInput />

Deje que su componente implemente AfterViewInit , tome la referencia al elemento con la anotación ViewChild y enfoque su elemento en el gancho ngAfterViewInit :

export class MyComponent implements AfterViewInit {
    @ViewChild("myInput")
    private _inputElement: ElementRef;

    [...]

    ngAfterViewInit(): void {
        _inputElement.nativeElement.focus();
    }
}

Answer 4

autofocus es una función html nativa que debería funcionar al menos para la inicialización de la página. Sin embargo, no funciona con muchos escenarios angulares, especialmente con *ngIf .

Puede hacer una directiva personalizada realmente simple para obtener el comportamiento deseado.

import { Directive, OnInit, ElementRef } from ''@angular/core'';

@Directive({
  selector: ''[myAutofocus]''
})
export class AutofocusDirective implements OnInit {

  constructor(private elementRef: ElementRef) { };

  ngOnInit(): void {
    this.elementRef.nativeElement.focus();
  }

}

La directiva anterior funciona para mis casos de uso.

Cómo utilizar

<input *ngIf="someCondition" myAutofocus />

EDITAR: Parece haber usos en los que es temprano para llamar al foco en el método del ciclo de vida OnInit . Si ese es el caso, cambie a OnAfterViewInit en OnAfterViewInit lugar.

Answer 5

<input type="text" [(ngModel)]="title" #myInput />
{{ myInput.focus() }}

simplemente agregue {{myInput.focus ()}} justo después de la entrada dentro de la plantilla