在Angular中使用Renderer2的操作代碼
Renderer2 類
Renderer2 類是 Angular 提供的一個抽象服務(wù)，允許在不直接操作 DOM 的情況下操縱應(yīng)用程序的元素。這是推薦的方法，因?yàn)樗沟酶菀组_發(fā)可以在沒有 DOM 訪問權(quán)限的環(huán)境中渲染的應(yīng)用程序，比如在服務(wù)器上、在 Web Worker 中或在原生移動端。
基本用法
通常會在自定義指令中經(jīng)常使用 Renderer2，因?yàn)?Angular 指令是修改元素的邏輯構(gòu)建塊。以下是一個簡單的示例，使用 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)在，您可以在模板中向元素添加該指令，渲染時將添加 wild 類：
<h1 appGoWild> Hello World! </h1> <!-- <h1 class="wild">Hello World!</h1> -->
您可以看到，總體上使用 Renderer2 并不比直接操作 DOM 更復(fù)雜?，F(xiàn)在讓我們來看一些最有用的方法：
createElement / appendChild / createText
創(chuàng)建新的 DOM 元素并將它們附加到其他元素中。在這個例子中，我們創(chuàng)建一個新的 div 和一個文本節(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è)我們在一個 article 元素上應(yīng)用了該指令：
<article> <div>Hello world!</div> </article>
setAttribute / removeAttribute
使用 setAttribute 或 removeAttribute 來設(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');
}
我們在上面的示例中已經(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 來移除它：
constructor(private renderer: Renderer2, private el: ElementRef) {}
ngOnInit() {
this.renderer.removeStyle(this.el.nativeElement, 'border-left');
}
setProperty
通過以下示例，您可以在圖像元素上設(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了詳解AngularJS2 Http服務(wù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
angularJS實(shí)現(xiàn)動態(tài)添加,刪除div方法
下面小編就為大家分享一篇angularJS實(shí)現(xiàn)動態(tài)添加,刪除div方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了AngularJS ng-style中使用filter的相關(guān)資料,需要的朋友可以參考下2016-09-09
Angular2 Service實(shí)現(xiàn)簡單音樂播放器服務(wù)
本篇文章主要介紹了Angular2 Service實(shí)現(xiàn)簡單音樂播放器服務(wù) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了AngularJS表單編輯提交功能實(shí)例,本文講解如何修改表單的默認(rèn)值,需要的朋友可以參考下2015-02-02
angularjs獲取到My97DatePicker選中的值方法
今天小編就為大家分享一篇angularjs獲取到My97DatePicker選中的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
本文主要介紹了利用angularjs1.4制作的簡易滑動門效果的實(shí)例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
本文主要介紹 AngularJS控制器,這里對 AngularJS控制器的知識詳細(xì)講解,并提供實(shí)例代碼有需要的小伙伴可以參考下2016-07-07
通過AngularJS實(shí)現(xiàn)圖片上傳及縮略圖展示示例
本篇文章主要介紹了通過AngularJS實(shí)現(xiàn)圖片上傳及縮略圖展示，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
在AngularJs中我們會不可避免的使用第三方庫，這篇文章主要介紹了如何在AngularJs中調(diào)用第三方插件庫，有興趣的可以了解下2017-05-05