Angular2-focalisation d'une zone de texte sur la charge des composants

utilisant l'attribut simple autofocus HTML5 works for' on load 'scenario

 <input autofocus placeholder="enter text" [(ngModel)]="test">

ou

<button autofocus (click)="submit()">Submit</button>

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

la question initiale demandait une façon de se concentrer d'abord, ou de se concentrer plus tard, en réponse à un événement. Il semble que la bonne façon d'aborder ceci est de créer une directive attribut qui peut être définie pour n'importe quel élément d'entrée, puis d'utiliser un événement personnalisé pour déclencher en toute sécurité la méthode focus sur cet élément d'entrée. Pour ce faire, créer d'abord la directive:

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', []);
        });
    }
}

notez qu'il utilise un renderer.invokeElementMethod sur le nativeElement, qui est web travailleur en sécurité. Notez également que focusEvent est déclaré comme un input.

ajouter ensuite les déclarations suivantes au composant Angular 2 qui a le modèle où vous souhaitez utiliser la nouvelle directive pour mettre l'accent sur un élément d'entrée:

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

n'oubliez pas d'importer EventEmitter au-dessus du composant comme ceci:

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

et dans le modèle pour ce composant, définissez le nouvel attribut [focus] comme ceci:

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

enfin, dans votre module, importez et déclarez la nouvelle directive comme ceci:

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

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

pour récapituler: la fonction ngAfterViewInit fera émettre le nouveau EventEmitter, et puisque nous avons assigné cet émetteur à l'attribut [focus] dans l'élément input de notre modèle, et que nous avons déclaré Ce EventEmitter comme input à la nouvelle directive et invoqué la méthode focus dans la fonction arrow que nous avons passé à l'abonnement à cet événement, l'élément input recevra focus après l'initialisation du composant, et chaque fois que setFocus est appelé.

j'ai eu le même besoin dans ma propre application, et cela a fonctionné comme annoncé. Merci beaucoup à ce qui suit: http://blog.thecodecampus.de/angular-2-set-focus-element /

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

c'est le meilleur et le plus simple moyen, parce que code" myInput.focus()" s'exécute après l'entrée créé

Voir Angulaire 2: Focus sur les nouveaux ajouté l'élément d'entrée pour savoir comment régler le focus.

Pour "à la charge" utiliser le ngAfterViewInit() cycle de vie de rappel.

j'ai eu un problème légèrement différent. J'ai travaillé avec des entrées dans un modal et ça m'a rendu fou. Aucune des solutions proposées n'a fonctionné pour moi.

Jusqu'à ce que je trouve ce numéro: https://github.com/valor-software/ngx-bootstrap/issues/1597

ce bon gars m'a donné l'indication que ngx-bootstrap modal a une configuration de mise au point. Si cette configuration n'est pas définie à false, le modal sera focalisé après l'animation et il n'y a aucun moyen de focaliser quoi que ce soit d'autre.

mise à jour:

pour définir cette configuration, ajouter l'attribut suivant au div modal:

[config]="{focus: false}"

mise à jour 2:

pour forcer la mise au point sur le champ d'entrée j'ai écrit une directive et mis la mise au point dans chaque cycle vérifié par la suite aussi longtemps que le champ d'entrée a le classe ng-intact.

 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', []);
    }
}

Je n'ai pas eu beaucoup de chance avec beaucoup de ces solutions sur tous les navigateurs. C'est la solution qui a fonctionné pour moi.

pour les changements de routeur:

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

puis ngAfterViewInit() pour le scénario onload.