Angular2+ autofocus élément d'entrée

Comment puis-je autofocus élément d'entrée? Semblable à cette question, mais pas avec AngularDart. Quelque chose comme ceci:

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

Ne Angular2 a tout à construire dans le support de cette fonctionnalité?

Mieux fermer question est cette une, mais est-il plus court/solution plus facile, puisque je n'ai pas de "liste de champs". Dans le lien fourni *ngFor="#input of inputs" est utilisé, mais j'ai seulement 1 d'entrée dans le modèle de contrôle.

  • deuxième alternative devrait fonctionner tout droit sorti de la boîte. Il n'en a pas?
  • Non, il n'est pas.
  • Simplement à l'aide de "autofocus" ne fonctionne pas parce que ce n'est efficace que lorsque la page se charge, non pas le moment Angulaire est la permutation de contenu et de sortir.
  • Ce sujet de la liaison: [attr.autofocus]="état"?
InformationsquelleAutor Makla | 2017-01-26
  1. 63

    C'est mon code actuel:

    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;
    }
}

    cas d'utilisation:

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

    Codes périmés (ancien réponse, juste au cas où):

    J'ai fini avec ce code:

    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 j'ai mis le code dans ngOnViewInit il ne fonctionne pas. Code aussi utiliser les meilleures pratiques, depuis l'appel de se concentrer sur l'élément directement n'est pas recommandé.

    Édité (conditionnel autofocus):

    Il y A quelques jours j'avais besoin d'conditionnelle auto focus, parce que j'ai cacher d'abord autofocus élément et je veux me concentrer un autre, mais uniquement lors de la première n'est pas visible, et j'ai fini avec ce code:

    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:

    Moteur de rendu.invokeElementMethod est obsolète et de nouvelles Renderer2 ne le supporte pas.
    Nous sommes donc de retour à la maternelle focus (qui ne travaillent pas à l'extérieur de DOM - SSR, par exemple!).

    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;
    }
}

    cas d'utilisation:

    [autofocus] //will focus
[autofocus]="true" //will focus
[autofocus]="false" //will not focus
    • C'est ce que j'ai fini avec de trop, après la lecture par le biais de ce ... angularjs.blogspot.co.royaume-uni/2016/04/...
    • J'ai utilisé ce code, et la OnInit a fonctionné pour moi. Je n'ai pas eu à utiliser le AfterViewInit.
    • Je voulais être sûr.
    • Super réponse! Grâce Makla
    • Super réponse! A travaillé pour moi.
    • Ne fonctionne pas pour moi, en utilisant les dernières Angulaire(5) et Ionique(3) charge très bien, essayé les deux version (ngOnInit et ngAfterViewInit). Vous ne savez pas ce qui me manque, mais il semble que le code est en cours d'exécution, mais le point de vue n'est pas encore là
    • Salut, je suis en utilisant Angulaire 5.0.5 et avant que 5.0.0 et cela fonctionne dans les deux cas. Espérons que cela vous aide à résoudre le problème.
    • Quand je l'ai fait, je les ai ExpressionChangedAfterItHasBeenCheckederror' exception. J'ai essayé d'utiliser detectChanges() juste après .focus() mais ça ne fonctionne pas.
    • J'ai eu le même problème (je ne sais pas avec qui d'erreur Angulaire commence à montrer) et je n'ai pas le comprendre pourquoi. J'ai aussi poser la question sur le cas, mais je ne peux pas trouver le fil de droite maintenant. - Je mettre à jour ma réponse. C'est mon dernier code qui fonctionne. Je n'aime pas la solution avec setTimeout mais c'était le seul moyen que j'ai réussi à le faire fonctionner. Espérons que ça fonctionne pour vous. Laissez-moi savoir. Mon Angulaire version est 5.2.3.
    • Merci, ça marche pour moi. Mais je n'aime pas ce genre de patchs. J'espère que quelqu'un va trouver une solution pour ce jour 🙁
    • Moi non plus (comme je l'ai triste), mais j'ai essayé beaucoup de choses, faire une recherche Google/SO. Je n'ai pas trouver de solution. Peut-être Günter Zöchbauer pouvez partager un peu de lumière sur ce problème.

    InformationsquelleAutor Makla
  2. 37

    autofocus est un natif html fonctionnalité qui devrait fonctionner au moins pour la page d'initialisation. Cependant, il ne parvient pas à travailler avec de nombreux angulaire des scénarios, en particulier avec *ngIf.

    Vous pouvez faire un vraiment simple et personnalisé directive pour obtenir le comportement souhaité.

    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 directive ci-dessus fonctionne pour mon cas d'utilisation.

    Comment utiliser

    <input *ngIf="someCondition" myAutofocus />

    EDIT: Il semble y avoir usecases où il est trop tôt pour appeler focus dans le OnInit cycle de vie de la méthode. Si c'est le cas, le changement de OnAfterViewInit à la place.

    InformationsquelleAutor Hampus
  3. 15

    La directive suivante fonctionne pour moi en utilisant Angulaire 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();
  }
}

    l'utiliser comme ceci:

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

    La possibilité d'utiliser OnInit événement de cycle de vie n'a pas de travail pour moi. J'ai aussi essayé d'utiliser le moteur de Rendu dans l'autre réponse, qui n'a pas fonctionné pour moi.

    InformationsquelleAutor Michael Lang
  4. 13

    Vous pouvez affecter l'élément d'entrée d'un modèle de référence variable #myInput:

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

    Laissez votre composant de mettre en œuvre AfterViewInit, saisissez la référence de l'élément d'entrée avec le ViewChild d'annotation et de concentrer votre élément dans le ngAfterViewInit crochet:

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

    [...]

    ngAfterViewInit(): void {
        this._inputElement.nativeElement.focus();
    }
}
    • Je préfère voir l'approche de base (attribut dans le modèle), je n'ai pas besoin d'écrire tout ce code dans chaque page de formulaire.
    • Impossible de lire la propriété 'nativeElement' undefined - avoir d'erreur sur la console
    • Avez-vous d'ajouter le modèle de référence de la variable? Et vous êtes sûr, vous avez accès _inputElement après le point de vue a été initialisé?
    • Je suis sûr, mais Il ne fonctionne pas encore avoir d'erreur...
    • J'ai été faire "Impossible de lire la propriété "focus" undefined." C'était à cause de mon modèle de référence de la variable liée à des données (#myInput="ngModel" dans le modèle). La solution était de faire un deuxième modèle de variable de référence pour le champ.
    InformationsquelleAutor rinukkusu
  5. 12
    <input type="text" [(ngModel)]="title" #myInput />
{{ myInput.focus() }}

    juste ajouter {{ myInput.focus() }} à droite après l'entrée à l'intérieur de modèle

    • Cheers c'est le meilleur
    • Je suis d'accord, pour moi, c'est la seule droite maintenant. Cependant, je n'aime pas la logique et je ne comprends pas pourquoi ne pas travailler avec l'html natif autofocus ni avec la directive
    • le plus simple et efficace solution, merci 🙂
    • réponse impressionnante!
    • Gurin, mais dans ce cas, ce qui est appelée à chaque fois à la souris. Cela peut-il créer une erreur lors de la création d'un build?
    • Je ne pense pas qu'il peut affecter à construire
    • Pas une bonne solution. Ce ne sera probablement jamais laisser le contrôle de la perdre de vue que angulaires permettra d'évaluer et appliquer de focus à chaque changement d'entrée, souris, etc...

    InformationsquelleAutor Sergey Gurin
  6. 3

    Si vous n'avez pas besoin de vrai/faux de la fonctionnalité, mais souhaitez autofocus toujours, il y a une courte mise en œuvre de Makla la solution:

    autofocus.la directive.ts:

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

@Directive({
    selector: '[autofocus]'
})

export class AutofocusDirective implements AfterViewInit {

    constructor(private el: ElementRef) {
    }

    ngAfterViewInit() {
        //Otherwise Angular throws error: Expression has changed after it was checked.
        window.setTimeout(() => {
            this.el.nativeElement.focus();
        });
    }
}

    cas d'utilisation:

    <input autofocus> //will focus

    À l'aide de AfterViewInit au lieu de OnInit rend le curseur placé après le contenu à l'intérieur de champ de saisie, doit-il être rempli.

    N'oubliez pas de déclarer et exportation votre directive dans votre module!

    InformationsquelleAutor Tanel Jõeäär