在《Angular开发实践（六）：服务端渲染》这篇文章的最后，我们也提到了在服务端渲染中需要牢记的几件事件，其中就包括不要使用window、 document、 navigator等浏览器特有的类型以及直接操作DOM元素。
这样就引出了 Angular 主要特性之一：横跨所有平台。通过合适的方法，使用 Angular 构建的应用，可复用在多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。
为了能够支持跨平台，Angular 通过抽象层封装了不同平台的差异。比如定义了抽象类 Renderer2 、抽象类 RootRenderer 等。此外还定义了以下引用类型：ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。通过 模板变量、@ViewChild 等方法获取DOM元素。
为了演示，先定义一个组件DemoComponent：
import { AfterViewInit, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
@Component({
template: `
<p id="demop" #demop>this is p!</p>
p的id：{{demop.id}} <!-- p的id：demop -->
`
})
export class DemoComponent implements AfterViewInit {
@ViewChild('demop') demop: ElementRef; // @ViewChild通过模板变量名获取
constructor(private renderer: Renderer2) {
}
ngAfterViewInit() {
console.log('p的id：' + this.demop.nativeElement.id); // p的id：demop
this.renderer.setStyle(this.demop.nativeElement, 'background-color', 'red'); // 通过Renderer2设置p的css样式background-color
}
}在Angular应用中不应该通过原生 API 或者 jQuery 来直接获取DOM元素：
let element1 = document.getElementById("demop"); // jQuery获取: $('#demop')而是应该通过Angular提供的方法来获取DOM元素：
<p id="demop" #demop>this is p!</p>
p的id：{{demop.id}} <!-- p的id：demop -->在组件模板中，我们在 p 上定义了 #demop 的模板变量，那么 demop 就等于该 p 的 DOM 对象，因此我们可以通过 demop.id 直接获取 p 的 id。
@ViewChild('demop') demop: ElementRef; // @ViewChild通过模板变量名获取
ngAfterViewInit() {
console.log('p的id：' + this.demop.nativeElement.id); // p的id：demop
}在组件类中，我们通过 @ViewChild 获取到包装有 p 的 DOM 对象的 ElementRef 对象，ElementRef 定义如下：
class ElementRef<T> {
constructor(nativeElement: T)
nativeElement: T
}因此我们可以在 ngAfterViewInit 中通过 this.demop.nativeElement 获取到该 p 的 DOM 对象，然后获取元素的id。
在上面通过几种方式获取到 p 的 DOM 对象，那么我们要如果对它进行操作呢（设置样式、属性、插入子元素等）？通过原始API 或者 jQuery 肯定是不允许的了。
这样我们就引出Angular抽象类 Renderer2 来对元素进行设置样式、属性、插入子元素等操作。
Renderer2 的定义如下：
class Renderer2 {
get data: {...}
destroyNode: ((node: any) => void) | null
destroy(): void
createElement(name: string, namespace?: string | null): any // 创建元素
createComment(value: string): any // 创建注释元素
createText(value: string): any // 创建文本元素
appendChild(parent: any, newChild: any): void // 添加子元素（在最后）
insertBefore(parent: any, newChild: any, refChild: any): void // 添加子元素（在最前）
removeChild(parent: any, oldChild: any): void // 移除子元素
selectRootElement(selectorOrNode: string | any): any // 获取根元素
parentNode(node: any): any // 获取父元素
nextSibling(node: any): any // 获取下一个兄弟元素
setAttribute(el: any, name: string, value: string, namespace?: string | null): void // 设置属性
removeAttribute(el: any, name: string, namespace?: string | null): void // 移除属性
addClass(el: any, name: string): void // 添加样式类
removeClass(el: any, name: string): void // 移除样式类
setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void // 设置样式
removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void // 移除样式
setProperty(el: any, name: string, value: any): void // 设置DOM对象属性，不同于元素属性
setValue(node: any, value: string): void // 设置元素值
listen(target: 'window' | 'document' | 'body' | any, eventName: string, callback: (event: any) => boolean | void): () => void // 注册事件
}因此，我们想改变 p 的背景色，就可以这样做：
ngAfterViewInit() {
this.renderer.setStyle(this.demop.nativeElement, 'background-color', 'red'); // 通过Renderer2设置p的css样式background-color
}
在《Angular开发实践（六）：服务端渲染》这篇文章的最后，我们也提到了在服务端渲染中需要牢记的几件事件，其中就包括不要使用window、 document、 navigator等浏览器特有的类型以及直接操作DOM元素。
这样就引出了 Angular 主要特性之一：横跨所有平台。通过合适的方法，使用 Angular 构建的应用，可复用在多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。
为了能够支持跨平台，Angular 通过抽象层封装了不同平台的差异。比如定义了抽象类 Renderer2 、抽象类 RootRenderer 等。此外还定义了以下引用类型：ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。通过 模板变量、@ViewChild 等方法获取DOM元素。
为了演示，先定义一个组件DemoComponent：
import { AfterViewInit, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
@Component({
template: `
<p id="demop" #demop>this is p!</p>
p的id：{{demop.id}} <!-- p的id：demop -->
`
})
export class DemoComponent implements AfterViewInit {
@ViewChild('demop') demop: ElementRef; // @ViewChild通过模板变量名获取
constructor(private renderer: Renderer2) {
}
ngAfterViewInit() {
console.log('p的id：' + this.demop.nativeElement.id); // p的id：demop
this.renderer.setStyle(this.demop.nativeElement, 'background-color', 'red'); // 通过Renderer2设置p的css样式background-color
}
}在Angular应用中不应该通过原生 API 或者 jQuery 来直接获取DOM元素：
let element1 = document.getElementById("demop"); // jQuery获取: $('#demop')而是应该通过Angular提供的方法来获取DOM元素：
<p id="demop" #demop>this is p!</p>
p的id：{{demop.id}} <!-- p的id：demop -->在组件模板中，我们在 p 上定义了 #demop 的模板变量，那么 demop 就等于该 p 的 DOM 对象，因此我们可以通过 demop.id 直接获取 p 的 id。
@ViewChild('demop') demop: ElementRef; // @ViewChild通过模板变量名获取
ngAfterViewInit() {
console.log('p的id：' + this.demop.nativeElement.id); // p的id：demop
}在组件类中，我们通过 @ViewChild 获取到包装有 p 的 DOM 对象的 ElementRef 对象，ElementRef 定义如下：
class ElementRef<T> {
constructor(nativeElement: T)
nativeElement: T
}因此我们可以在 ngAfterViewInit 中通过 this.demop.nativeElement 获取到该 p 的 DOM 对象，然后获取元素的id。
在上面通过几种方式获取到 p 的 DOM 对象，那么我们要如果对它进行操作呢（设置样式、属性、插入子元素等）？通过原始API 或者 jQuery 肯定是不允许的了。
这样我们就引出Angular抽象类 Renderer2 来对元素进行设置样式、属性、插入子元素等操作。
Renderer2 的定义如下：
class Renderer2 {
get data: {...}
destroyNode: ((node: any) => void) | null
destroy(): void
createElement(name: string, namespace?: string | null): any // 创建元素
createComment(value: string): any // 创建注释元素
createText(value: string): any // 创建文本元素
appendChild(parent: any, newChild: any): void // 添加子元素（在最后）
insertBefore(parent: any, newChild: any, refChild: any): void // 添加子元素（在最前）
removeChild(parent: any, oldChild: any): void // 移除子元素
selectRootElement(selectorOrNode: string | any): any // 获取根元素
parentNode(node: any): any // 获取父元素
nextSibling(node: any): any // 获取下一个兄弟元素
setAttribute(el: any, name: string, value: string, namespace?: string | null): void // 设置属性
removeAttribute(el: any, name: string, namespace?: string | null): void // 移除属性
addClass(el: any, name: string): void // 添加样式类
removeClass(el: any, name: string): void // 移除样式类
setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void // 设置样式
removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void // 移除样式
setProperty(el: any, name: string, value: any): void // 设置DOM对象属性，不同于元素属性
setValue(node: any, value: string): void // 设置元素值
listen(target: 'window' | 'document' | 'body' | any, eventName: string, callback: (event: any) => boolean | void): () => void // 注册事件
}因此，我们想改变 p 的背景色，就可以这样做：
ngAfterViewInit() {
this.renderer.setStyle(this.demop.nativeElement, 'background-color', 'red'); // 通过Renderer2设置p的css样式background-color
}相关推荐：
Atas ialah kandungan terperinci Angular开发实践（七）： 跨平台操作DOM及渲染器Renderer2 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk menjana nombor rawak dalam js
Pengenalan kepada kaedah pelaksanaan kesan khas Java
Apakah perisian pecutan cdn?
Bagaimana untuk menyelesaikan masalah akses ditolak semasa boot Windows 10
504 Gateway Tamat masa
Adakah linux sistem terbenam?
Bina pelayan git anda sendiri
Bagaimana untuk menggunakan fungsi jsreplace
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
