在《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: ` <div #demoDiv>this is DIV!</div> DIV的id：{{demoDiv.id}} <!-- DIV的id：demoDiv --> ` }) export class DemoComponent implements AfterViewInit { @ViewChild('demoDiv') demoDiv: ElementRef; // @ViewChild通过模板变量名获取 constructor(private renderer: Renderer2) { } ngAfterViewInit() { console.log('DIV的id：' + this.demoDiv.nativeElement.id); // DIV的id：demoDiv this.renderer.setStyle(this.demoDiv.nativeElement, 'background-color', 'red'); // 通过Renderer2设置div的css样式background-color } }