在Angular中使用Renderer2的操作代碼
Renderer2 類
Renderer2 類是 Angular 提供的一個(gè)抽象服務(wù)，允許在不直接操作 DOM 的情況下操縱應(yīng)用程序的元素。這是推薦的方法，因?yàn)樗沟酶菀组_(kāi)發(fā)可以在沒(méi)有 DOM 訪問(wèn)權(quán)限的環(huán)境中渲染的應(yīng)用程序，比如在服務(wù)器上、在 Web Worker 中或在原生移動(dòng)端。
基本用法
通常會(huì)在自定義指令中經(jīng)常使用 Renderer2，因?yàn)?Angular 指令是修改元素的邏輯構(gòu)建塊。以下是一個(gè)簡(jiǎn)單的示例，使用 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');
}
}
現(xiàn)在，您可以在模板中向元素添加該指令，渲染時(shí)將添加 wild 類：
<h1 appGoWild> Hello World! </h1> <!-- <h1 class="wild">Hello World!</h1> -->
您可以看到，總體上使用 Renderer2 并不比直接操作 DOM 更復(fù)雜?，F(xiàn)在讓我們來(lái)看一些最有用的方法：
createElement / appendChild / createText
創(chuàng)建新的 DOM 元素并將它們附加到其他元素中。在這個(gè)例子中，我們創(chuàng)建一個(gè)新的 div 和一個(gè)文本節(jié)點(diǎn)。然后我們將文本節(jié)點(diǎn)放入我們的新 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);
}
我們的模板在渲染后將如下所示，假設(shè)我們?cè)谝粋€(gè) article 元素上應(yīng)用了該指令：
<article> <div>Hello world!</div> </article>
setAttribute / removeAttribute
使用 setAttribute 或 removeAttribute 來(lái)設(shè)置或移除屬性：
constructor(private renderer: Renderer2, private el: ElementRef) {}
ngOnInit() {
this.renderer.setAttribute(this.el.nativeElement, 'aria-hidden', 'true');
}
addClass / removeClass
要添加類，可以執(zhí)行以下操作：
constructor(private renderer: Renderer2, private el: ElementRef) {}
ngOnInit() {
this.renderer.addClass(this.el.nativeElement, 'wild');
}
我們?cè)谏厦娴氖纠幸呀?jīng)介紹了 addClass。至于 removeClass，只需提供元素引用和要移除的類名：
constructor(private renderer: Renderer2, private el: ElementRef) {}
ngOnInit() {
this.renderer.removeClass(this.el.nativeElement, 'wild');
}
setStyle / removeStyle
使用 setStyle 使用 Renderer2 添加內(nèi)聯(lián)樣式：
constructor(private renderer: Renderer2, private el: ElementRef) {}
ngOnInit() {
this.renderer.setStyle(
this.el.nativeElement,
'border-left',
'2px dashed olive'
);
}
…并使用 removeStyle 來(lái)移除它：
constructor(private renderer: Renderer2, private el: ElementRef) {}
ngOnInit() {
this.renderer.removeStyle(this.el.nativeElement, 'border-left');
}
setProperty
通過(guò)以下示例，您可以在圖像元素上設(shè)置 alt 屬性：
constructor(private renderer: Renderer2, private el: ElementRef) {}
ngOnInit() {
this.renderer.setProperty(this.el.nativeElement, 'alt', 'Cute alligator');
}
…或設(shè)置輸入字段的值：
// ...
ngOnInit() {
this.renderer.setProperty(this.el.nativeElement, 'value', 'Cute alligator');
}
到此這篇關(guān)于在Angular中使用Renderer2的示例代碼的文章就介紹到這了,更多相關(guān)Angular中使用Renderer2內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
AngularJs返回前一頁(yè)面時(shí)刷新一次前面頁(yè)面的方法
今天小編就為大家分享一篇AngularJs返回前一頁(yè)面時(shí)刷新一次前面頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
這篇文章主要介紹了淺析AngularJs HTTP響應(yīng)攔截器的相關(guān)資料,需要的朋友可以參考下2015-12-12
AngularJS單選框及多選框?qū)崿F(xiàn)雙向動(dòng)態(tài)綁定
這篇文章主要為大家詳細(xì)介紹了AngularJS單選框及多選框?qū)崿F(xiàn)雙向動(dòng)態(tài)綁定的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-01-01
Angular.js中$resource高大上的數(shù)據(jù)交互詳解
這篇文章主要給大家介紹了關(guān)于Angular.js中$resource高大上的數(shù)據(jù)交互的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angular.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起看看吧。2017-07-07
Angular 2.0+ 的數(shù)據(jù)綁定的實(shí)現(xiàn)示例
本篇文章主要介紹了Angular 2.0+ 的數(shù)據(jù)綁定的實(shí)現(xiàn)實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
AngularJS中的Module類負(fù)責(zé)定義應(yīng)用如何啟動(dòng)，它還可以通過(guò)聲明的方式定義應(yīng)用中的各個(gè)片段。我們來(lái)看看它是如何實(shí)現(xiàn)這些功能的2015-12-12
在Angular中實(shí)現(xiàn)懶加載的示例代碼
在Angular中,懶加載技術(shù)通過(guò)路由配置實(shí)現(xiàn)模塊的按需加載,可優(yōu)化應(yīng)用啟動(dòng)時(shí)間和減少初始加載代碼量,首先創(chuàng)建獨(dú)立模塊,在模板中使用<router-outlet>插入懶加載組件,并可采用預(yù)加載策略如PreloadAllModules,以提前加載所有懶加載模塊,優(yōu)化加載性能2024-10-10
AngularJS基礎(chǔ) ng-class-odd 指令示例
本文主要介紹AngularJS ng-class-odd 指令,這里對(duì)ng-class-odd基礎(chǔ)知識(shí)做了詳細(xì)整理,并有示例代碼和效果圖,學(xué)習(xí)AngularJS的同學(xué)可以參考下2016-08-08
詳解基于angular-cli配置代理解決跨域請(qǐng)求問(wèn)題
本篇文章主要介紹了詳解基于angular-cli配置代理解決跨域請(qǐng)求問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
使用AngularJS制作一個(gè)簡(jiǎn)單的RSS閱讀器的教程
這篇文章主要介紹了使用Angular.js制作一個(gè)簡(jiǎn)單的RSS閱讀器的教程,AngularJS是一個(gè)非常有人氣的JavaScript庫(kù),文中介紹的制作方法主要使用到了FreedReadR模版,需要的朋友可以參考下2015-06-06