社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > Angular开发实践（七）： 跨平台操作DOM及渲染器Renderer2

Angular开发实践（七）： 跨平台操作DOM及渲染器Renderer2

不言
发布： 2018-04-02 15:11:41
原创
4397 人浏览过

在《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(&#39;demop&#39;) demop: ElementRef; // @ViewChild通过模板变量名获取

    constructor(private renderer: Renderer2) {
    }

    ngAfterViewInit() {
        console.log(&#39;p的id：&#39; + this.demop.nativeElement.id); // p的id：demop
        this.renderer.setStyle(this.demop.nativeElement, &#39;background-color&#39;, &#39;red&#39;); // 通过Renderer2设置p的css样式background-color
    }
}
登录后复制
登录后复制

获取组件中的p

在Angular应用中不应该通过原生 API 或者 jQuery 来直接获取DOM元素：

let element1 = document.getElementById("demop"); // jQuery获取: $(&#39;#demop&#39;)
登录后复制

而是应该通过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

@ViewChild(&#39;demop&#39;) demop: ElementRef; // @ViewChild通过模板变量名获取

ngAfterViewInit() {
    console.log(&#39;p的id：&#39; + 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

在上面通过几种方式获取到 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: &#39;window&#39; | &#39;document&#39; | &#39;body&#39; | any, eventName: string, callback: (event: any) => boolean | void): () => void // 注册事件
}
登录后复制
登录后复制

因此，我们想改变 p 的背景色，就可以这样做：

ngAfterViewInit() {
    this.renderer.setStyle(this.demop.nativeElement, &#39;background-color&#39;, &#39;red&#39;); // 通过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 &#39;@angular/core&#39;;

@Component({
    template: `
        <p id="demop" #demop>this is p!</p>
        p的id：{{demop.id}} <!-- p的id：demop -->
    `
})
export class DemoComponent implements AfterViewInit {
    @ViewChild(&#39;demop&#39;) demop: ElementRef; // @ViewChild通过模板变量名获取

    constructor(private renderer: Renderer2) {
    }

    ngAfterViewInit() {
        console.log(&#39;p的id：&#39; + this.demop.nativeElement.id); // p的id：demop
        this.renderer.setStyle(this.demop.nativeElement, &#39;background-color&#39;, &#39;red&#39;); // 通过Renderer2设置p的css样式background-color
    }
}
登录后复制
登录后复制

获取组件中的p

在Angular应用中不应该通过原生 API 或者 jQuery 来直接获取DOM元素：

let element1 = document.getElementById("demop"); // jQuery获取: $(&#39;#demop&#39;)
登录后复制

而是应该通过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

@ViewChild(&#39;demop&#39;) demop: ElementRef; // @ViewChild通过模板变量名获取

ngAfterViewInit() {
    console.log(&#39;p的id：&#39; + 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

在上面通过几种方式获取到 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: &#39;window&#39; | &#39;document&#39; | &#39;body&#39; | any, eventName: string, callback: (event: any) => boolean | void): () => void // 注册事件
}
登录后复制
登录后复制

因此，我们想改变 p 的背景色，就可以这样做：

ngAfterViewInit() {
    this.renderer.setStyle(this.demop.nativeElement, &#39;background-color&#39;, &#39;red&#39;); // 通过Renderer2设置p的css样式background-color
}
登录后复制
登录后复制


相关推荐：

Angular开发实践（五）：深入解析变化监测

Angular开发实践（六）：服务端渲染

Angular开发实践（一）：环境准备及框架搭建

以上是Angular开发实践（七）： 跨平台操作DOM及渲染器Renderer2 的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
angular 操作 跨平台
来源：php.cn
上一篇：Angular开发实践（六）：服务端渲染 下一篇：在Ajax的请求中async:false与async:true有什么区别
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
Angular 7 去除 SCSS 中的重复属性 AngularSASS(.scss)剥离属性。如何防止这种情况发生，以便我可以嵌入重复的属性以实现跨浏览器兼容性？要复制，请创建一个新的Angular7.2项目{"nam...
来自于 2024-04-04 23:28:54
0
1
1382
Angular应用中导入Javascript原型构造函数时抛出错误 我有一个Angular应用程序，我试图在其中导入一个具有构造函数的JS文件。但是当我运行该应用程序时，webpack会抛出错误。资产中的Javascript文件：TestServi...
来自于 2024-04-04 11:36:15
0
1
288
使用 Ajax 生成内容 - 滚动到 Id 不起作用 我根据通过ajax获取的数据生成页面内容。我遇到的问题是，当我想滚动到某个ID时，滚动要么不会发生，要么滚动到错误的位置。我一直在查看SO问答，但没有找到任何好的解决方案。很多答案...
来自于 2024-04-04 09:29:39
0
1
397
在 Angular 中创建圆形 SVG 温度拖动器？ 这是我尝试在Angular中创建的圆形拇指拖动器的静态演示。它使用rinkle-dashoffset="-260"设置将拇指/拖动器定位在靠近拇指后面的圆形路径...
来自于 2024-04-03 09:33:29
0
1
376
Angular：了解文本元素颜色的属性绑定缺乏反应性 下面是我的.ts文件，import{Component}from'@angular/core';@Component({selector:'app-event-binding',t...
来自于 2024-04-01 17:28:52
0
1
358
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板