我有一个AngularDart组件，如何在每次组件显示时让文本输入字段自动聚焦？ [英] I have an AngularDart component, how to get the text input field to auto-focus every time the component shows?

问题描述

我在AngularDart组件中有一个文本输入，如下所示：

I have a text input in a AngularDart component like the following:

<input type="email" id="inputFirstName" ng-model="cmp.inputFirstName">

每次组件显示时，如何使文本输入自动对焦？

How can I make the text input auto-focus every time the component shows?

我尝试设置html5属性自动对焦，但这仅在第一次显示组件时有效。

I tried setting the html5 attribute autofocus, but that only works on the first time the component is displayed.

推荐答案

您可以尝试使用自定义指令（新装饰器）：

You could try to use a custom Directive (new Decorator) for this:

import 'package:angular/angular.dart' as ng;
import 'dart:html';

@ng.Decorator(selector: '[autofocus]')
class AutoFocusDecorator implements ng.AttachAware{
  InputElement inputElement;

  AutoFocusDecorator(Element this.inputElement);

  @override
  void attach() {
    inputElement.focus();
  }
}

并像

<input type="email" id="inputFirstName" ng-model="cmp.inputFirstName" autofocus>

这篇关于我有一个AngularDart组件，如何在每次组件显示时让文本输入字段自动聚焦？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！