Renderer2 類
Renderer2 類是 Angular 提供的一個抽象服務，允許在不直接操作 DOM 的情況下操縱應用程序的元素。這是推薦的方法，因為它使得更容易開發可以在沒有 DOM 訪問權限的環境中渲染的應用程序，比如在服務器上、在 Web Worker 中或在原生移動端。
基本用法
通常會在自定義指令中經常使用 Renderer2，因為 Angular 指令是修改元素的邏輯構建塊。以下是一個簡單的示例，使用 Renderer2 的 addClass 方法向具有該指令的元素添加 wild 類：
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');}
}
現在，您可以在模板中向元素添加該指令，渲染時將添加 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
要添加類，可以執行以下操作：
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');
}
e??? 這就結束了我們的概述。請參考 API 文檔以獲取可用方法的完整列表。
)
