如何在 AngularJS 中的页面加载时自动将焦点设置在输入字段上？

我们可以使用角度指令自动关注任何输入字段。在这里，我们创建了一个自定义指令，可以自动关注表单中的任何字段。

创建自定义指令就像创建 Angular 组件一样。要创建自定义指令，我们必须将@Component装饰器替换为@Directive装饰器。

方法 ：

• 创建要使用的 Angular 应用程序。
• 创建指令“AutoFocus” 处理输入字段的自动对焦。在此指令中，将 HTML 元素设置为焦点。
• 然后在app.module.ts中导入这个指令并将其添加到提供者的列表中。
• 创建一个简单的表单，我们将输入字段设置为专注于页面重新加载。因此，我们创建了一个包含两个输入字段“电子邮件”和“密码”的注册表单，并将指令“autofocus”添加到“电子邮件”输入字段，然后该字段在页面重新加载时自动聚焦。

语法：输入字段内的“自动对焦”下方是自动对焦此输入字段的指令。

因此，让我们创建简单的自定义指令“AutoFocus”来处理输入字段的自动对焦。

例子：

auto-focus.directive.ts

import {AfterViewInit, Directive,ElementRef} from '@angular/core'
  
@Directive({
    selector:'autofocus'
})
export class AutoFocus implements AfterViewInit{
  
    constructor(
        private elementRef: ElementRef
    ){}
  
    ngAfterViewInit(){
        this.elementRef.nativeElement.focus();
    }
}

在上面的代码中，我们创建了一个指令“autofocus”，这里“autofocus”是这个指令的名称/选择器，每当我们想使用这个指令时，我们都必须提供选择器。我们正在使用角度“ngAfterViewInit”生命周期钩子，使元素在视图初始化后聚焦。

现在我们必须确保 angular 知道我们新创建的指令，所以我们必须在“app.module.ts”文件中提供它。

app.module.ts

import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { AutoFocus } from './auth/signup/autofocus.directive';
  
@NgModule({
  declarations: [
    AppComponent,
    AutoFocus
  ],
  imports: [],
  providers: [],
  bootstrap: [AppComponent],
})
  
export class AppModule { }

所以在这里我们在“declarations”数组中提供了“AutoFocus”指令，并确保也将其导入。

现在我们必须创建一个输入字段，我们将在其上应用此自动对焦指令。为此，我们创建了一个简单的注册表单，在此表单用户中，电子邮件输入字段在页面重新加载时自动聚焦。

signup.component.html

  
    
      
      
    
    
        
    
    
      SignUp
    
  

因此，在上述表单中，电子邮件输入字段中提供了“autofocus”指令，并且该字段在页面重新加载时自动聚焦。

输出 ：