在Angular中使用Renderer2的操作代码
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');
}
到此这篇关于在Angular中使用Renderer2的示例代码的文章就介绍到这了,更多相关Angular中使用Renderer2内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了AngularJS实现的JSONP跨域访问数据传输功能,较为详细的分析了JSONP的概念、功能并结合实例形式给出了AngularJS使用JSONP进行跨域访问数据传输的相关技巧,需要的朋友可以参考下2017-07-07
本篇文章主要介绍了AngularJs常用的过滤器。具有很好的参考价值。下面跟着小编一起来看下吧2017-05-05
本篇文章主要介绍了angularjs实现的前端分页控件示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要为大家详细介绍了angularjs实现多张图片上传并预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
SCE，即strict contextual escaping,我的理解是 严格的上下文隔离 ...翻译的可能不准确，但是通过字面理解，应该是angularjs严格的控制上下文访问，通过本文给大家介绍AngularJS 使用$sce控制代码安全检查，对angularjs sce相关知识感兴趣的朋友一起学习吧2016-01-01
这篇文章主要介绍了Angular6 Filter实现页面搜索的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了Angularjs修改密码的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-05-05
AnglarJS作为一款优秀的Web框架，可大大简化前端开发的负担。本文给大家介绍AngularJS进行性能调优的7个建议，涉及到angularjs性能调优相关知识，对本文感兴趣的朋友一起学习吧2015-12-12
这篇文章虽然只有10个问题，但是覆盖了angular开发中的各个方面，有基本的知识点，也有在开发过程中遇见的问题，同时也有较为开放性的问题去辨别面试者的基础水准和项目经验，注意答案仅供参考哦～2016-08-08
之前因为项目的需求，第一次系统的使用了angular这一优秀的js框架，其所拥有的许多优秀特性极大的方便了项目的开发，然而在开发中也遇到过不少的问题，趁着最近有时间给大家总结一下，这篇文章将会介绍使用angularjs1结合百度的图表插件echart作为例子用以演示。2016-10-10
最新评论