web-dev-qa-db-fra.com

Angular 2 événement onload pour un élément DOM natif

Mon objectif ultime est de créer un autofocus sur un élément textarea. Je viens de penser à une solution pour appeler e.target.focus() à l'événement onload. Quelque chose comme:

<textarea rows="8" col="60" (load)='handleLoad($event)'>

et alors:

handleLoad(e){
  e.target.focus();
}

Le problème est que angular ne reconnaît pas l'événement load.

PS: J'ai essayé autofocus une fois mais cela ne semble pas fonctionner.

javascripthtmlangular
19
Pho Huynh

Vous devriez pouvoir le faire avec le hook ngAfterViewInit:

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

// ...

export class Component implements AfterViewInit {

  @ViewChild('textarea') textarea: ElementRef

  ngAfterViewInit() {
    this.textarea.nativeElement.focus()
  }
}

Où dans le modèle vous devez définir une variable de modèle:

<textarea #textarea rows="8" col="60"></textarea>
27
dfsq

Essayez l'attribut HTML5 autofocus :

<textarea rows="8" col="60" autofocus>

Toujours mieux (et beaucoup plus simple!) D'utiliser si possible l'API native DOM que de le faire en JavaScript :)

EDIT: Ce qui précède est incorrect. Voir mon commentaire ci-dessous.

9
jessepinho