Angular 光标指向定位

最新推荐文章于 2023-12-20 15:36:36 发布

云墨cloudMel

最新推荐文章于 2023-12-20 15:36:36 发布

阅读量786

点赞数 1

分类专栏： Angular

本文链接：https://blog.youkuaiyun.com/weixin_42481234/article/details/113834352

版权

Angular 专栏收录该内容

14 篇文章

订阅专栏

这篇博客探讨了AngularJS中如何创建一个名为`CustomFormComponent`的自定义表单组件。该组件在内容初始化后利用`AfterContentInit`生命周期钩子自动将焦点设置到输入框上，提高用户体验。示例代码展示了如何使用`@ViewChild`装饰器获取元素引用并调用`nativeElement.focus()`来实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { Component, ElementRef, ViewChild, AfterContentInit } from '@angular/core';

@Component({
  selector: 'custom-form',
  template: `
    <form>
      <input
        placeholder="Name"
        #nameInput
      />
    </form>
  `
})
export class FormComponent implements AfterContentInit {
  @ViewChild('nameInput') nameInput: ElementRef;
  
  // Change state before angular change detection complete
  ngAfterContentInit() {
    this.nameInput.nativeElement.focus();
  }
}