web-dev-qa-db-fra.com

Comment se concentrer sur un champ dans Angular

J'ai mis à jour de Angular2 à Angular4 et dans la documentation, il est écrit de manière à utiliser le Renderer2 au lieu de Renderer, qui est obsolète.

Maintenant, je cherche dans le fichier Renderer ( https://github.com/angular/angular/blob/master/packages/core/src/render/api.ts ) mais je ne trouve pas un moyen d'appeler le focus de manière i habitué.

Ancienne méthode:

this.renderer.invokeElementMethod(element, 'focus', []);

Quelle est la nouvelle méthode?

EDIT

Que se passe-t-il si l'élément que je sélectionne se fait via QuerySelector, par exemple:

let inputField = document.querySelectorAll('.dialog input');
if ( inputField[0] ) {
   inputField[0].focus();
}

Depuis sa sélection à l'aide de querySelector, la méthode de focus n'existe pas sur elle.

angulartypescriptrenderer
10
Hassan

La invokeElementMethod est obsolète et ne retrouvera pas son chemin dans le nouveau rendu. Pour définir le focus sur un élément, vous pouvez simplement l'utiliser maintenant:

element.nativeElement.focus();

Si vous utilisez document.querySelectorAll, vous faites quelque chose qui n’est pas angulaire et vous devriez trouver un autre moyen de le faire. S'il n'y a pas d'autre moyen de le faire, alors le même principe s'applique. La méthode focus() est javascript, vous pouvez donc l'utiliser dans angular2/TypeScript. Assurez-vous de bien insérer la variable querySelectorAll dans le crochet ngAfterViewInit du composant:

ngAfterViewInit() {
   let inputField: HTMLElement = <HTMLElement>document.querySelectorAll('.dialog input')[0];
   inputField && inputField.focus();
}
17
PierreDuc

Vous pouvez aussi utiliser selectRootElement method of Renderer2 .

Par exemple: 

constructor(private renderer: Renderer2) {}

this.renderer.selectRootElement('#domElementId').focus()

, où domElementId est id = 'domElementId' dans votre code HTML

10
seytzhan
template reference variable :#inlineEditControl
<input #inlineEditControl class="form-control form-control-lg"  [placeholder]="label">

 @ViewChild('inlineEditControl') inlineEditControl: ElementRef; // input DOM element

this.inlineEditControl.nativeElement.focus();
4
Vikas Mahajan

À l'heure actuelle, il semble que cette tâche ne soit pas réalisable sans modifier directement le DOM. Comme d'autres l'ont dit, invokeElementMethod () est obsolète. Cependant, vous rencontrerez également des problèmes d'utilisation de selectRootElement, car ce n'est pas son objectif et vous finirez par perdre les enfants à l'intérieur de votre DIV. Voici un lien vers une question SO qui explique plus en détail selectRootElement (car la documentation angulaire est atroce):

Renderer multiple selectRootElement Issue (avec plnkr fourni)

Pour l’instant, il semble que le seul moyen d’atteindre facilement votre objectif est d’utiliser une variable de référence de modèle, un enfant de vue et le yourViewChild.nativeElement.focus () (bien que cette pratique ne soit également pas recommandée)

Une solution de contournement suggérée utilisant un FocusService se trouve également dans ce numéro de GitHub: https://github.com/angular/angular/issues/15674

Dans ce numéro, Tytskyi indique qu'il est possible d'implémenter FocusService et de fournir différentes implémentations de focus () basées sur AppModuleBrowser et AppModuleServer. Je ne suis pas sûr de la précision de son fonctionnement, mais c'est peut-être le seul moyen d'y parvenir sans utiliser nativeElement pour le moment.

1
Benjafosaur Wilfong