Angular에서 Renderer2 사용

Renderer2 클래스는 DOM을 직접 건드리지 않고도 앱의 요소를 조작할 수 있는 서비스 형태로 Angular에서 제공하는 추상화입니다. 이렇게 하면 서버, 웹 작업자 또는 기본 모바일과 같이 DOM 액세스 권한이 없는 환경에서 렌더링할 수 있는 앱을 더 쉽게 개발할 수 있으므로 권장되는 접근 방식입니다.

원래 Renderer 서비스는 이제 Renderer2를 위해 더 이상 사용되지 않습니다.

기본 사용법

Angular 지시문이 요소 수정을 위한 논리적 구성 요소이기 때문에 사용자 지정 지시문에서 Renderer2를 자주 사용합니다. 다음은 지시문이 있는 요소에 wild 클래스를 추가하기 위해 Renderer2의 addClass 메서드를 사용하는 간단한 예입니다.

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

@Directive({
  selector: '[appGoWild]'
})
export class GoWildDirective implements OnInit {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    this.renderer.addClass(this.el.nativeElement, 'wild');
  }
}

ElementRef를 사용하여 디렉티브가 첨부된 밑줄이 있는 기본 요소에 액세스하는 방법도 주목하십시오.

이제 템플릿의 요소에 디렉티브를 추가할 수 있으며 렌더링 시 와일드 클래스가 추가됩니다.

<h1 appGoWild>
  Hello World!
</h1>
<!-- <h1 class="wild">Hello World!</h1> -->

Renderer2의 전반적인 사용이 DOM을 직접 조작하는 것보다 더 복잡하지 않다는 것을 알 수 있습니다. 이제 가장 유용한 몇 가지 방법을 살펴보겠습니다.

createElement/appendChild/createText

새 DOM 요소를 만들고 다른 요소 안에 추가합니다. 이 예에서는 새 div를 만들고 텍스트 노드를 만듭니다. 그런 다음 새 div 안에 텍스트 노드를 배치하고 마지막으로 지시문에서 참조하는 요소에 div를 추가합니다.

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
  const div = this.renderer.createElement('div');
  const text = this.renderer.createText('Hello world!');

  this.renderer.appendChild(div, text);
  this.renderer.appendChild(this.el.nativeElement, div);
}

문서 요소에 지시문을 적용한 경우 템플릿이 렌더링되면 다음과 같이 표시됩니다.

<article>
  <div>Hello world!</div>
</article>

setAttribute/제거속성

속성을 설정하거나 제거하려면 setAttribute 또는 removeAttribute를 사용하십시오.

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
  this.renderer.setAttribute(this.el.nativeElement, 'aria-hidden', 'true');
}

추가 클래스/제거 클래스

addClass에 다음을 수행할 수 있습니다.

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
  this.renderer.addClass(this.el.nativeElement, 'wild');
}

위의 예에서 addClass를 다루었습니다. removeClass의 경우 요소 참조와 제거할 클래스 이름을 제공하기만 하면 됩니다.

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
  this.renderer.removeClass(this.el.nativeElement, 'wild');
}

setStyle/removeStyle

Renderer2를 사용하여 인라인 스타일을 추가하려면 setStyle을 사용하십시오.

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
  this.renderer.setStyle(
    this.el.nativeElement,
    'border-left',
    '2px dashed olive'
  );
}

…그리고 removeStyle을 사용하여 제거합니다.

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
  this.renderer.removeStyle(this.el.nativeElement, 'border-left');
}

setProperty

다음 예에서는 이미지 요소에 alt 속성을 설정할 수 있습니다.

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
  this.renderer.setProperty(this.el.nativeElement, 'alt', 'Cute alligator');
}

...또는 입력 필드의 값을 설정합니다.

// ...

ngOnInit() {
  this.renderer.setProperty(this.el.nativeElement, 'value', 'Cute alligator');
}

😄 이것으로 개요를 마칩니다. 사용 가능한 메서드의 전체 목록은 API 설명서를 참조하세요.