2016-07-16 171 views
13

Il mio obiettivo finale è rendere autofocus un elemento textarea sulla creazione. Ho appena pensato a una soluzione per chiamare e.target.focus() sull'evento onload. Qualcosa di simile:Evento onload angolare 2 per un elemento DOM nativo

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

e poi:

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

Il problema è angolare non riconosce load evento.

PS: Ho provato autofocus una volta ma sembra non funzionare.

+0

non esiste un evento di questo tipo per textarea, ma è possibile utilizzare onload di ng-include se lo stesso esiste in angular2 – YOU

+0

Stavo cercando la stessa cosa ma senza fortuna. –

risposta

18

Si dovrebbe essere in grado di farlo in gancio ngAfterViewInit:

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

// ... 

export class Component implements AfterViewInit { 

    @ViewChild('textarea') textarea: ElementRef 

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

Dove nel modello è necessario impostare modello variabile:

<textarea #textarea rows="8" col="60"></textarea> 
+0

Funziona perfettamente. Grazie. –

+0

L'hook che dovresti veramente usare, se hai intenzione di percorrere questa strada, è 'ngAfterViewInit()'. 'ngOnInit()' viene chiamato dopo che la classe è stata istanziata, ma non vi è alcuna garanzia che la vista sia già renderizzata (e quindi, non ci può essere 'nativeElement' da mettere a fuoco). 'ngAfterViewInit()' viene chiamato dopo il rendering del DOM. Vedi [Documenti di hook del ciclo di vita di Angular] (https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html). – jessepinho

+1

@jessepinho Hai ragione, stavo progettando di modificare la domanda anche dopo che ho finito con sandwitch. Grazie! – dfsq

10

Prova the HTML5 autofocus attribute:

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

Sempre meglio (e molto più semplice!) usare l'API DOM nativa, se possibile, piuttosto che farlo in JavaScript :)

+0

Direi anche che dovrebbe essere fatto in questo modo. Tuttavia, il problema è che semplicemente non funziona nella maggior parte dei casi. – dfsq

+0

@dfsq Cosa intendi "nella maggior parte dei casi"? [Sembra] (http://caniuse.com/#search=autofocus) è abbastanza ben supportato. – jessepinho

+0

Voglio dire, funziona bene quando HTML viene visualizzato al caricamento della pagina. Non funziona in modo affidabile quando l'HTML viene reso in modo asincrono, come di solito in SAP. Controlla questo test che stavo facendo: http://plnkr.co/edit/rpNKQRYJh3DuPafaVzqz?p=preview – dfsq