Angular에서 클래스 이름으로 요소 찾기

ElementRef를 소개하고 이를 사용하여 Angular에서 클래스 이름으로 요소를 찾는 방법을 소개합니다.

ElementRef를 사용하여 Angular에서 이름으로 클래스 찾기

ElementRef는 nativeElement 속성을 포함하는 네이티브 DOM 요소 개체 래퍼입니다. DOM 요소에 대한 참조를 보유하고 이를 사용하여 DOM을 조작합니다.

구성 요소 클래스에서 HTML 요소를 가져오기 위해 ViewChild와 함께 사용됩니다. ElementRef 개체를 사용하여 이해하기 위해 예제를 살펴보겠습니다.

다음 명령을 사용하여 Angular에서 새 애플리케이션을 만듭니다.

# angular
ng new my-app

응용 프로그램을 만든 후 이 명령을 사용하여 응용 프로그램의 디렉터리로 이동합니다.

# angular
cd my-app

모든 종속성이 올바르게 설치되었는지 확인하기 위해 앱을 실행해 보겠습니다.

# angular
ng serve --open

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

클래스로 가져온 후 constructor에 개인 ElByClassName을 만들고 <HTMLElement>를 사용하여 클래스 이름으로 얻은 요소를 저장하는 ngAfterViewInit 함수를 만듭니다.

원하는 요소가 있으면 이제 innerHTML을 사용하여 버튼 이름을 변경할 수 있습니다. app.component.ts의 코드는 다음과 같습니다.

# angular
import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular';
constructor(private ElByClassName: ElementRef) {}
ngAfterViewInit() {
const btnElement = (<HTMLElement>this.ElByClassName.nativeElement).querySelector(
'.myButton'
);
btnElement.innerHTML = 'This is Button';
}
}

myButton 클래스를 사용하여 app.component.html에 버튼 템플릿을 생성해야 합니다.

# angular
<button class="myButton">My Button</button>

출력:

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

버튼의 이름을 변경하는 대신 요소를 교체하려면 outerHTML을 사용할 수 있습니다.

ngAfterViewInit()에서 다음 코드를 작성하여 버튼을 제목으로 대체합니다.

# Angular
btnElement.outerHTML = '<h1>This is Heading</h1>';

출력: