在Angular中使用Renderer2的操作代碼
Renderer2 類
Renderer2 類是 Angular 提供的一個抽象服務，允許在不直接操作 DOM 的情況下操縱應用程序的元素。這是推薦的方法，因為它使得更容易開發(fā)可以在沒有 DOM 訪問權限的環(huán)境中渲染的應用程序，比如在服務器上、在 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
創(chuàng)建新的 DOM 元素并將它們附加到其他元素中。在這個例子中，我們創(chuàng)建一個新的 div 和一個文本節(jié)點。然后我們將文本節(jié)點放入我們的新 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
要添加類，可以執(zhí)行以下操作：
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 添加內聯(lián)樣式：
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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
今天小編就為大家分享一篇AngularJs返回前一頁面時刷新一次前面頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了淺析AngularJs HTTP響應攔截器的相關資料,需要的朋友可以參考下2015-12-12
這篇文章主要為大家詳細介紹了AngularJS單選框及多選框實現雙向動態(tài)綁定的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
Angular.js中$resource高大上的數據交互詳解
這篇文章主要給大家介紹了關于Angular.js中$resource高大上的數據交互的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用angular.js具有一定的參考學習價值，需要的朋友們下面跟著小編來一起看看吧。2017-07-07
本篇文章主要介紹了Angular 2.0+ 的數據綁定的實現實例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
AngularJS中的Module類負責定義應用如何啟動，它還可以通過聲明的方式定義應用中的各個片段。我們來看看它是如何實現這些功能的2015-12-12
在Angular中,懶加載技術通過路由配置實現模塊的按需加載,可優(yōu)化應用啟動時間和減少初始加載代碼量,首先創(chuàng)建獨立模塊,在模板中使用<router-outlet>插入懶加載組件,并可采用預加載策略如PreloadAllModules,以提前加載所有懶加載模塊,優(yōu)化加載性能2024-10-10
本文主要介紹AngularJS ng-class-odd 指令,這里對ng-class-odd基礎知識做了詳細整理,并有示例代碼和效果圖,學習AngularJS的同學可以參考下2016-08-08
本篇文章主要介紹了詳解基于angular-cli配置代理解決跨域請求問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了使用Angular.js制作一個簡單的RSS閱讀器的教程,AngularJS是一個非常有人氣的JavaScript庫,文中介紹的制作方法主要使用到了FreedReadR模版,需要的朋友可以參考下2015-06-06