Angular의 ElementRef

ElementRef가 무엇이고 Angular에서 사용하는 방법을 소개합니다.

ElementRef를 사용하여 Angular에서 DOM 요소 가져오기

ElemenRef는 nativeElement 속성을 포함하는 네이티브 DOM 요소 객체를 감싸는 래퍼입니다. DOM 요소에 대한 참조를 보유하고 있으며 DOM을 조작하는 데 사용할 수 있습니다. 컴포넌트 클래스에서 HTML 요소를 가져오기 위해 ViewChild와 함께 사용됩니다.

ElementRef를 자세히 이해하고 응용 프로그램에서 사용하는 방법을 알기 위해 예제를 살펴보겠습니다.

먼저 app.component.ts 파일의 @angular/core에서 ViewChild, ElementRef, Component 및 AfterViewInit를 가져와야 합니다.

가져온 후에는 클래스에서 ViewChild를 사용하여 ElementRefDiv를 생성합니다. 그리고 div에 값을 전달할 ngAfterViewInit 함수를 생성합니다.

따라서 app.component.ts의 코드는 아래와 같습니다.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('ElementRefDiv') ElementView: ElementRef;

  ngAfterViewInit() {
    console.log(this.ElementView);
    this.ElementView.nativeElement.innerHTML = 'Hello I am Using ElementRef To Display this!';
  }
}

ElementRefDiv 클래스를 사용하여 app.component.html에 템플릿을 만들어야 합니다.

# angular
<div #ElementRefDiv></div>

출력:

따라서 이 간단한 단계를 통해 ElementRef 및 ViewChild를 사용하여 모든 DOM 요소를 조작할 수 있습니다.