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

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

创建一个自定义指令就像创建一个Angular组件一样。要创建一个自定义指令，我们必须用@Directive装饰器取代@Component装饰器。

步骤 :

• 创建要使用的Angular应用程序。
• 创建一个指令 “AutoFocus” __，处理输入区域的自动聚焦。在这个指令中设置HTML元素为焦点。
• 然后在app.module.ts中导入这个指令，并将其添加到提供者的列表中。
• 创建一个简单的表单，我们将输入字段设置为在页面重新加载时聚焦。所以我们创建了一个有两个输入字段 “email “和 “password “的注册表单，并在 “email “输入字段上添加指令 “autofocus”，然后这个字段就会在页面重新加载时自动聚焦。

语法：在输入字段内的“autofocus “下面是一个指令，用于自动聚焦这个输入字段。

<input autofocus type="email" name="email" #email="ngModel" ngModel />

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

示例:

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 “是这个指令的名称/选择器，每当我们想使用这个指令时，就必须提供选择器。我们正在使用angular “ngAfterViewInit”生命周期钩子，使元素在视图初始化后聚焦。

现在我们必须确保angular知道我们新创建的指令，所以我们必须在“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 { }

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

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

<form (submit)="onSignup(form)" #form="ngForm" >
  <mat-card>
    <mat-form-field>
      <!-- 
        AutoFocus directive applied in the below
        input field
       -->
      <input
      autofocus 
      type="email"
       matInput 
       name="email"
       #email="ngModel"
       ngModel
       />
    </mat-form-field>
    <mat-form-field>
        <input ngModel #password="ngModel" type="password" 
        matInput placeholder="Password" name="password">
    </mat-form-field>
    <button
      type="submit"
      mat-raised-button color="primary">
      <span>SignUp</span>
    </button>
  </mat-card>
</form>

<input autofocus type="email" matInput 
    name="email" #email="ngModel" ngModel />

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

输出 :