Angular의 getElementById 교체

1. Angular의 getElementById 대체
2. Angular의 ElementRef
3. Angular에서 ElementRef를 사용하여 입력에서 값 가져오기

Angular에서 getElementById 기능의 대체를 소개합니다.

또한 입력에서 문서의 요소 참조와 값을 가져오기 위해 Angular에 ElementRef 함수를 도입할 것입니다.

Angular의 getElementById 대체

getElementById 메소드는 지정된 값을 가진 ID 속성이 있는 요소를 반환합니다. 이 방법은 HTML DOM에서 가장 일반적이며 문서의 요소를 조작하거나 정보를 가져올 때마다 거의 사용됩니다.

getElementById는 vanilla Javascript 함수이고 Angular에서 Typescript를 사용하기 때문에 Typescript에서 이 함수를 대체하는 것은 이 튜토리얼에서 소개할 ElementRef입니다.

Angular의 ElementRef

ElementRef는 지정된 DOM 요소를 둘러싸서 기본 요소의 메서드와 속성을 향상시킬 수 있는 클래스입니다. 요소를 ElementRef로 정의하면 nativeElement 객체로 액세스할 수 있습니다.

이 문서는 Angular 4에서 Angular 12까지 호환됩니다.

@ViewChild 데코레이터가 있는 클래스에서 ElementRef Interface를 사용하여 요소 참조를 가져오겠습니다.

먼저 app.component.html 템플릿을 편집하고 다음 코드를 추가합니다.

# angular

<div #myNameElem></div>

<button (click)="getValue()">Get Value</button>

출력:

app.component.ts 파일에 다음을 추가합니다.

#angular
import { Component, VERSION, ViewChild, ElementRef } from "@angular/core";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})

export class AppComponent {
  name = "Angular " + VERSION.major;
  @ViewChild("myNameElem") myNameElem: ElementRef;
  getValue() {
    console.log(this.myNameElem);
    this.myNameElem.nativeElement.innerHTML = "I am changed by ElementRef & ViewChild";
  }
}

출력:

Angular에서 ElementRef를 사용하여 입력에서 값 가져오기

이제 Angular에서 ElementRef를 사용하여 입력 값을 가져오는 방법을 소개합니다.

먼저 app.component.html 템플릿을 편집하고 다음 코드를 추가합니다.

# angular
<input type="text" name="name" #myNameElem />
<button (click)="getValue()">Get Value</button>
<button (click)="resetValue()">Reset</button>

출력:

이제 app.component.ts 파일에 다음을 추가합니다.

#angular
import { Component, VERSION, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  @ViewChild('myNameElem') myNameElem: ElementRef;
  getValue() {
    console.log(this.myNameElem.nativeElement.value);
  }
  resetValue() {
    this.myNameElem.nativeElement.value = '';
  }
}

출력: