国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Angular開發(fā)實(shí)踐（七）： 跨平臺操作DOM及渲染器Renderer2

young.li / 3490人閱讀

摘要：為了能夠支持跨平臺，通過抽象層封裝了不同平臺的差異。這樣我們就引出抽象類來對元素進(jìn)行設(shè)置樣式屬性插入子元素等操作。

在《Angular開發(fā)實(shí)踐（六）：服務(wù)端渲染》這篇文章的最后，我們也提到了在服務(wù)端渲染中需要牢記的幾件事件，其中就包括不要使用window、 document、 navigator等瀏覽器特有的類型以及直接操作DOM元素。

這樣就引出了 Angular 主要特性之一：橫跨所有平臺。通過合適的方法，使用 Angular 構(gòu)建的應(yīng)用，可復(fù)用在多種不同平臺的應(yīng)用上 —— Web、移動 Web、移動應(yīng)用、原生應(yīng)用和桌面原生應(yīng)用。

為了能夠支持跨平臺，Angular 通過抽象層封裝了不同平臺的差異。比如定義了抽象類 Renderer2 、抽象類 RootRenderer 等。此外還定義了以下引用類型：ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。通過 模板變量、@ViewChild 等方法獲取DOM元素。

為了演示，先定義一個組件DemoComponent：

import { AfterViewInit, Component, ElementRef, Renderer2, ViewChild } from "@angular/core";

@Component({
    template: `
        
this is DIV!

        DIV的id：{{demoDiv.id}} 
    `
})
export class DemoComponent implements AfterViewInit {
    @ViewChild("demoDiv") demoDiv: ElementRef; // @ViewChild通過模板變量名獲取

    constructor(private renderer: Renderer2) {
    }

    ngAfterViewInit() {
        console.log("DIV的id：" + this.demoDiv.nativeElement.id); // DIV的id：demoDiv
        this.renderer.setStyle(this.demoDiv.nativeElement, "background-color", "red"); // 通過Renderer2設(shè)置div的css樣式background-color
    }
}
獲取組件中的div

在Angular應(yīng)用中不應(yīng)該通過原生 API 或者 jQuery 來直接獲取DOM元素：

let element1 = document.getElementById("demoDiv"); // jQuery獲取: $("#demoDiv")

而是應(yīng)該通過Angular提供的方法來獲取DOM元素：

模板變量 
this is DIV!

DIV的id：{{demoDiv.id}}

在組件模板中，我們在 div 上定義了 #demoDiv 的模板變量，那么 demoDiv 就等于該 div 的 DOM 對象，因此我們可以通過 demoDiv.id 直接獲取 div 的 id。

@ViewChild 
@ViewChild("demoDiv") demoDiv: ElementRef; // @ViewChild通過模板變量名獲取

ngAfterViewInit() {
    console.log("DIV的id：" + this.demoDiv.nativeElement.id); // DIV的id：demoDiv
}

在組件類中，我們通過 @ViewChild 獲取到包裝有 div 的 DOM 對象的 ElementRef 對象，ElementRef 定義如下：

class ElementRef {
  constructor(nativeElement: T)
  nativeElement: T
}

因此我們可以在 ngAfterViewInit 中通過 this.demoDiv.nativeElement 獲取到該 div 的 DOM 對象，然后獲取元素的id。

操作組件中的div

在上面通過幾種方式獲取到 div 的 DOM 對象，那么我們要如果對它進(jìn)行操作呢（設(shè)置樣式、屬性、插入子元素等）？通過原始API 或者 jQuery 肯定是不允許的了。

這樣我們就引出Angular抽象類 Renderer2 來對元素進(jìn)行設(shè)置樣式、屬性、插入子元素等操作。

Renderer2 的定義如下：

class Renderer2 {
    get data: {...}
    destroyNode: ((node: any) => void) | null
    destroy(): void
    createElement(name: string, namespace?: string | null): any // 創(chuàng)建元素
    createComment(value: string): any // 創(chuàng)建注釋元素
    createText(value: string): any // 創(chuàng)建文本元素
    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 // 設(shè)置屬性
    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 // 設(shè)置樣式
    removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void // 移除樣式
    setProperty(el: any, name: string, value: any): void // 設(shè)置DOM對象屬性，不同于元素屬性
    setValue(node: any, value: string): void // 設(shè)置元素值
    listen(target: "window" | "document" | "body" | any, eventName: string, callback: (event: any) => boolean | void): () => void // 注冊事件
}

因此，我們想改變 div 的背景色，就可以這樣做：

ngAfterViewInit() {
    this.renderer.setStyle(this.demoDiv.nativeElement, "background-color", "red"); // 通過Renderer2設(shè)置div的css樣式background-color
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/93890.html

相關(guān)文章

  • [譯] Angular DOM 更新機(jī)制

    摘要：注更新元素節(jié)點(diǎn)和文本節(jié)點(diǎn)都提到了渲染器，這也是一個重要的概念。每一個視圖對象都有一個屬性，即是的引用，也就是組件渲染器，的實(shí)際更新操作由它完成。 原文鏈接：The mechanics of DOM updates in Angular showImg(https://segmentfault.com/img/remote/1460000014687960?w=419&h=268); ...

    xumenger 評論0 收藏0

  • angular模塊庫開發(fā)實(shí)例

    摘要：模塊庫開發(fā)實(shí)例隨著前端框架的誕生，也會隨之出現(xiàn)一些組件庫，方便日常業(yè)務(wù)開發(fā)。在瀏覽器中，渲染是將模型映射到視圖的過程。然而視圖可以是頁面中的段落表單按鈕等其他元素，這些頁面元素內(nèi)部使用來表示。 angular模塊庫開發(fā)實(shí)例 隨著前端框架的誕生，也會隨之出現(xiàn)一些組件庫，方便日常業(yè)務(wù)開發(fā)。今天就聊聊angular4組件庫開發(fā)流程。 下圖是button組件的基礎(chǔ)文件。 showImg(htt...

    JerryZou 評論0 收藏0

  • Angular開發(fā)實(shí)踐（六）：服務(wù)端渲染

    摘要：在服務(wù)端渲染方面提供一套前后端同構(gòu)解決方案，它就是統(tǒng)一平臺，一項(xiàng)在服務(wù)端運(yùn)行應(yīng)用的技術(shù)。這些著陸頁是純，并且即使被禁用了也能顯示。它會把客戶端請求轉(zhuǎn)換成服務(wù)端渲染的頁面。它是服務(wù)端渲染器和你的應(yīng)用之間的橋梁。 Angular Universal Angular在服務(wù)端渲染方面提供一套前后端同構(gòu)解決方案，它就是 Angular Universal（統(tǒng)一平臺），一項(xiàng)在服務(wù)端運(yùn)行 Angul...

    Eirunye 評論0 收藏0

  • Angular6錯誤 Service: No provider for Renderer2

    摘要：解決辦法很簡單，既然無法注入就不注入。可以利用工廠類代替直接注入的方式。示例代碼如下利用對象去操作元素即可 這個錯誤一般是在構(gòu)造函數(shù)中 注入 Renderer2 引起的。 解決辦法很簡單，既然無法注入Renderer2就不注入。可以利用工廠類RendererFactory2 代替直接注入Renderer2的方式。示例代碼如下： import { Renderer2, RendererF...

    rickchen 評論0 收藏0

  • 前端每周清單：Node.js 微服務(wù)實(shí)踐，Vue.js 與 GraphQL，Angular 組件技巧

    摘要：前端每周清單第期微服務(wù)實(shí)踐，與，組件技巧，攻防作者王下邀月熊編輯徐川前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。 前端每周清單第 26 期：Node.js 微服務(wù)實(shí)踐，Vue.js 與 GraphQL，Angular 組件技巧，HeadlessChrome 攻防 作者：王下邀月熊 編輯：徐川...

    wall2flower 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<