Comment utiliser Angular4 pour définir le focus à l'élément d'id

Je suis nouveau sur Angulaire, et suis en train de l'utiliser pour définir le focus sur l'entrée de l'id "1". Je suis en utilisant le code suivant:

@ViewChild('input1') inputEl: ElementRef;

puis plus tard dans le composant:

 this.inputEl.nativeElement.focus();

Mais il ne fonctionne pas. Ce que je fais mal? Toute aide sera très appréciée.

stackoverflow.com/questions/38307060/...
L'entrée est généré dynamiquement, dans le cadre d'un PrimeNg modèle. J'utilise jquery pour définir l'id de l'élément, mais je n'ai aucune idée de comment régler [focus]. Est-il une autre voie?
Merci @Z. Bagley! L'une des réponses à la question que vous visées avait la solution.

OriginalL'auteur Pismotality | 2017-10-13

  1. 35

    composant

    import { Component, ElementRef, ViewChild, AfterViewInit} from '@angular/core';
... 

@ViewChild('input1') inputEl:ElementRef;

ngAfterViewInit() {
      setTimeout(() => this.inputEl.nativeElement.focus());
}

    html

    <input type="text" #input1>
    Que faire si l'id du composant est dynamicaly généré????
    Voulez-vous dire de l'id de l'entrée? Je pense qu'il n'est pas possible.
    Pourriez-vous expliquer pourquoi le setTimeout est-elle nécessaire? Cela semble contre-intuitif si le code est en cours d'exécution après la vue est init ed. Est-ce un piège courant?
    Stijn Van Bael a ajouté setTimeout() pour éviter ExpressionChangedAfterItHasBeenCheckedError

    OriginalL'auteur Dmitry Grinko

  2. 15

    L'une des réponses à la question posée par @Z. Bagley m'a donné la réponse. J'ai dû importer Renderer2 de @angulaire/core dans mon composant. Alors:

    const element = this.renderer.selectRootElement('#input1');

setTimeout(() => element.focus(), 0);

    Merci @MrBlaise pour la solution!

    Le setTimeout est la clé ici. Vous pouvez également obtenir de l'élément sans le moteur de rendu en annotant un ElementRef propriété avec la ViewChild annotation et puis, référencement de la " nativeElement la propriété de ElementRef.
    Bien que l'utilisation de ElementRef a XSS des risques de sécurité, afin de Dwight solution est probablement plus sûr. Voir: angulaire.io/api/core/ElementRef
    Ceci est également utile d'être au courant: github.com/angular/angular/issues/15674

    OriginalL'auteur Pismotality

  3. 1

    Voici un Angular4+ directive que vous pouvez ré-utiliser dans n'importe quel composant. Basé sur le code donné dans la réponse Niel T dans cette question.

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

@Directive({
    selector: '[focusDirective]'
})
export class FocusDirective {
    @Input() cssSelector: string

    constructor(
        private ngZone: NgZone,
        private renderer: Renderer
    ) { }

    ngOnInit() {
        console.log(this.cssSelector);
        this.ngZone.runOutsideAngular(() => {
            setTimeout(() => {
                this.renderer.selectRootElement(this.cssSelector).focus();
            }, 0);
        });
    }
}

    Vous pouvez l'utiliser dans un modèle de composant comme ceci:

    <input id="new-email" focusDirective cssSelector="#new-email"
  formControlName="email" placeholder="Email" type="email" email>

    Donner la saisie d'un identifiant et transmettre l'id de la cssSelector propriété de la directive. Ou vous pouvez passer n'importe quel cssSelector vous le souhaitez.

    Commentaires de Niel T:

    Puisque la seule chose que je suis en train de faire est de définir le focus sur un élément, je
    n'avez pas besoin de me préoccuper de détection de changement, je peux donc
    exécuter l'appel au moteur de rendu.selectRootElement à l'extérieur du Angulaire. Parce que
    J'ai besoin de donner les nouvelles sections et de temps de calcul, la section de l'élément est
    enveloppé dans un délai d'expiration pour permettre le rendu des threads du temps à rattraper
    avant de l'élément de sélection est tentée. Une fois tout ce qui est de l'installation, je
    pouvez simplement appeler l'élément de base à l'aide de sélecteurs CSS.

    OriginalL'auteur rmcsharry

  4. 1

    Cela l'a aidé à m' (ionique, mais l'idée est la même)
    https://mhartington.io/post/setting-input-focus/

    modèle:

    <ion-item>
      <ion-label>Home</ion-label>
      <ion-input #input type="text"></ion-input>
</ion-item>
<button (click)="focusInput(input)">Focus</button>

    dans le contrôleur:

      focusInput(input) {
    input.setFocus();
  }

    OriginalL'auteur Максим Коровин

  5. 1

    Ici est une directive que vous pouvez utiliser dans tout composant:

    import { NgZone, Directive, ElementRef, AfterContentInit, Renderer2 } from '@angular/core';

@Directive({
    selector: '[appFocus]'
})
export class FocusDirective implements AfterContentInit {
    constructor(private el: ElementRef, private zone: NgZone, private renderer: Renderer2) {}

    ngAfterContentInit() {
        this.zone.runOutsideAngular(() => setTimeout(() => {
            this.renderer.selectRootElement(this.el.nativeElement).focus();
        }, 0));
    }
}

    Utilisation:

    <input type="text" appFocus>

    OriginalL'auteur ACDev

  6. 0

    J'ai aussi face à un même problème, après quelques recherche j'ai trouvé une bonne solution comme @GreyBeardedGeek meantioned que setTimeout est la clé de cette solution.Il est tout à fait correcte. Dans votre méthode, vous avez juste besoin d'ajouter un setTimeout et votre problème sera résolu. 

    setTimeout(() => this.inputEl.nativeElement.focus(), 0);

    OriginalL'auteur Abhijeet