原生 DOM 元素的 Angular 2 onload 事件答案

【问题标题】：Angular 2 onload event for a native DOM element原生 DOM 元素的 Angular 2 onload 事件
【发布时间】：2016-11-19 11:06:12
【问题描述】：

我的最终目标是让 textarea 元素自动专注于创建。我刚刚想到了在事件onload 上调用e.target.focus() 的解决方案。比如：

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

然后：

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

问题是 Angular 无法识别 load 事件。

PS：我试过autofocus 一次，但似乎不起作用。

【问题讨论】：

textarea没有这样的事件，但是如果angular2中存在同样的事件，你可以使用ng-include的onload
我也在寻找同样的东西，但没有运气。

标签： javascript html angular

【解决方案1】：

你应该可以在 ngAfterViewInit 钩子中做到这一点：

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>

【讨论】：

如果你要走这条路，你真正应该使用的钩子是ngAfterViewInit()。 ngOnInit() 在类被实例化后被调用，但不能保证视图已经被渲染（因此，可能没有 nativeElement 可以关注）。 ngAfterViewInit() 在 DOM 渲染后调用。见Angular's lifecycle hooks docs。
@jessepinho 你说得对，我也打算在完成 Sandwitch 后编辑问题。谢谢！
慢慢来@dfsq。吃很重要。
'AfterViewInit' 只触发一次，并且在我的元素存在于 DOM 之前。 -- 当我的特定元素第一次显示时我应该处理什么事件？

【解决方案2】：

试试the HTML5 autofocus attribute:

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

如果可能的话，使用本机 DOM API 总是比使用 JavaScript 更好（而且更简单！）:)

编辑：以上内容不正确。请参阅下面的my comment。

【讨论】：

我还要说应该这样做。但是，问题在于它在大多数情况下都不起作用。
@dfsq “在大多数情况下”是什么意思？ Looks like 得到了很好的支持。
我的意思是，它在页面加载时呈现 HTML 时效果很好。当 HTML 被异步渲染时，它不能可靠地工作，就像通常在 SAP 中一样。检查我正在做的这个测试：plnkr.co/edit/rpNKQRYJh3DuPafaVzqz?p=preview
@dfsq 在 Safari + Chrome 中对我来说效果很好。在 Firefox 中尝试过，但控制台中出现 JS 错误，导致应用无法启动。
就像我在问题中提到的那样，在我的特定情况下，这不起作用。 @dfsq 说的是真的。