Renderer2 クラスは、DOMに直接触れることなくアプリの要素を操作できるようにするサービスの形式で、Angularによって提供される抽象化です。 これは、サーバー、Webワーカー、ネイティブモバイルなど、DOMアクセスがない環境でレンダリングできるアプリの開発を容易にするために推奨されるアプローチです。

元のRendererサービスは廃止され、Renderer2が採用されたことに注意してください。

基本的な使用法

Angularディレクティブが要素を変更するための論理的な構成要素であるため、カスタムディレクティブRenderer2をよく使用します。 次に、Renderer2の addClass メソッドを使用して、ディレクティブを持つ要素にwildクラスを追加する簡単な例を示します。

go-wild.directive.ts
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 を使用して、ディレクティブがアタッチされている下線付きのネイティブ要素にアクセスする方法にも注目してください。

これで、テンプレート内の要素にディレクティブを追加でき、レンダリング時にwildクラスが追加されます。

<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 要素にディレクティブを適用すると、テンプレートはレンダリングされると次のようになります。

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

setAttribute / removeAttribute

setAttributeまたはremoveAttributeを使用して、属性を設定または削除します。

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

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

addClass / removeClass

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

setStyle を使用して、Renderer2を使用してインラインスタイルを追加します。

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ドキュメントを参照してください。