Angular Form 필드에 대한 자동 초점

자동 초점은 간단한 HTML 속성이지만 Angular 앱에서 예상대로 작동하지 않습니다. 문제를 해결하기 위한 몇 가지 다른 접근법을 통해 그 이유를 알아봅시다!

자동 초점 속성

Angular 입력 양식 필드에 autofocus 속성을 추가합니다.

<input type="text" id="firstName" name="firstName" formControlName="firstName" autofocus>

페이지를 새로고침하면 양식 필드에 포커스가 있는 것을 볼 수 있습니다. 문제가 해결되었죠?! 그렇게 빠르지 않아!

먼저 다른 페이지에서 시작한 다음 양식이 있는 페이지로 이동해 보십시오. 필드에 초점이 없습니다. 무슨 일이에요?

자동 초점은 페이지가 로드되는 즉시 발생합니다. Angular 애플리케이션은 단일 페이지 애플리케이션(SPA)입니다. 해당 단일 페이지가 로드되면 끝입니다! 다른 페이지로의 향후 탐색에 초점을 맞출 기회를 놓쳤습니다.

그래서 우리가 뭘 할 수 있지? 읽어!

템플릿 변수

firstNameField라는 입력 필드에 템플릿 변수를 만듭니다. 템플릿 변수에는 파운드 기호가 접두사로 붙는다는 점을 기억하십시오.

<input type="text" id="firstName" name="firstName" formControlName="firstName" #firstNameField>

구성 요소 내에서 다음을 가져와야 합니다.

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

보기에서 입력 필드에 액세스하려고 합니다. ViewChild을 사용하고 이전에 생성한 firstNameField라는 템플릿 변수를 참조할 수 있습니다. 그런 다음 반드시 그럴 필요는 없지만 firstNameField라는 이름을 지정합니다. 유형을 ElementRef , 특히 HTML 입력 요소로 정의합니다.

@ViewChild('firstNameField') firstNameField: ElementRef<HTMLInputElement>;

첫 번째 생각은 OnInit 수명 주기 후크 내에서 무언가를 수행하는 것일 수 있습니다. 이 특정 시나리오에서는 작동하지 않습니다. 어떤 작업을 시도하기 전에 페이지에 양식 필드가 있는지 확인해야 합니다. 이를 위해서는 AfterViewInit 수명 주기 후크가 필요합니다.

구성 요소에 AfterViewInit를 구현해야 합니다.

export class ExampleComponent implements AfterViewInit, OnInit {
  ...
}

ngAfterViewInit 수명 주기 후크 내에서 기본 네이티브 요소에 액세스하고 포커스 함수를 호출해 보겠습니다.

ngAfterViewInit() {
  this.firstNameField.nativeElement.focus();
}

먼저 다른 페이지에서 시작한 다음 양식이 있는 페이지로 이동해 보십시오. 이제 양식 필드에 포커스가 생겼습니다!

이제 동일한 작업을 수행하려는 다른 양식 필드가 있다고 상상해 보십시오. 각 구성 요소에 대해 위의 변경 사항을 약간 반복적으로 수행합니다. Angular 디렉티브가 도움이 될 수 있는 곳입니다!

자동 초점 지침

다음 지시문을 만듭니다.

import { AfterViewInit, Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appAutofocus]'
})
export class AutofocusDirective implements AfterViewInit {
  constructor(private element: ElementRef<HTMLInputElement>) { }

  ngAfterViewInit(): void {
    this.element.nativeElement.focus();
  }
}

구성 요소에서 했던 것과 비슷한 작업을 여기에서 수행하고 있습니다. AfterViewInit 수명 주기 후크를 사용하여 요소에 포커스를 둡니다.

이 지시문을 모든 모듈에서 사용할 수 있도록 하려면 필요한 모든 모듈로 가져올 수 있도록 자체 모듈로 생성합시다.

import { NgModule } from '@angular/core';

import { AutofocusDirective } from './autofocus.directive';

@NgModule({
  declarations: [AutofocusDirective],
  exports: [AutofocusDirective]
})
export class AutofocusDirectiveModule { }

지시문을 사용하려면 먼저 사용하려는 모듈로 가져오십시오.

import { AutofocusDirectiveModule } from 'path/to/autofocus.directive.module';

@NgModule({
  ...
  imports: [
    ...
    AutofocusDirectiveModule,
    ...
  ]
})
export class ExampleModule { }

appAutofocus라는 지시문 속성을 입력 필드에 추가합니다.

<input type="text" id="firstName" name="firstName" formControlName="firstName" appAutofocus>

이전 템플릿 변수 섹션에 설명된 단계를 수행하는 대신 이제 양식 필드에 포커스를 추가해야 하는 모든 곳에서 이 지시문을 재사용할 수 있습니다!


저희 웹사이트 https://nightwolf.dev를 방문하고 Facebook 및 !