Angular 2 события onload для собственного элемента DOM

Моя конечная цель состоит в том, чтобы создать автозапуск элемента textarea при создании. Я только подумал о решении вызвать e.target.focus() в событии onload. Что-то вроде:

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

а затем:

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

Проблема angular не распознает событие load.

PS: Я пробовал autofocus один раз, но кажется, что он не работает.

Ответ 1

Вы можете сделать это в ngAfterViewInit hook:

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

// ...

export class Component implements AfterViewInit {

  @ViewChild('textarea') textarea: ElementRef

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

Где в шаблоне вам нужно установить переменную шаблона:

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

Ответ 2

Попробуйте атрибут HTML5 autofocus:

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

Всегда лучше (и намного проще!) использовать собственный DOM API, если это возможно, чем сделать это в JavaScript:)