亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Angular2 控制視圖的封裝模式

keke / 2213人閱讀

摘要：如果你運用好視圖的封裝模式，會幫你解決好很多的問題。通過在組件的元數(shù)據(jù)上設(shè)置視圖封裝模式，你可以分別控制每個組件的封裝模式。

Angular2 控制視圖的封裝模式

為什么我想要分享控制視圖的封裝模式呢？主要是我們angular的項目大多數(shù)都會去引入一個UI組件，但往往因為需求和關(guān)系我們會去修改UI組件的樣式。這時，因為有些人不是很了解View encapsulation里面的屬性，往往會直接在全局的style.js里面添加全局樣式，等項目越來越大，就會出現(xiàn)一些不知名的bug和維護起來變得困難。如果你運用好視圖的封裝模式，會幫你解決好很多的問題。
一般來說組件的 CSS 樣式被封裝進了自己的視圖中，而不會影響到應(yīng)用程序的其它部分。通過在組件的元數(shù)據(jù)上設(shè)置視圖封裝模式，你可以分別控制每個組件的封裝模式。Angular2有三種樣式封裝模式：

ViewEncapsulation.Native - 使用原生的Shadow Dom。

ViewEncapsulation.Emulated - angular2的默認值，通過預(yù)處理（并改名）CSS 代碼來模擬 Shadow DOM 的行為，在標簽上增加標識，來固定樣式的作用域，以達到把 CSS 樣式局限在組件視圖中的目的。

ViewEncapsulation.None - 沒有Shadow Dom，樣式?jīng)]有封裝， Angular 會把 CSS 添加到全局樣式中。而不會應(yīng)用上前面討論過的那些作用域規(guī)則、隔離和保護等。 從本質(zhì)上來說，這跟把組件的樣式直接放進 HTML 是一樣的。

在 ViewEncapsulation.Emulated下 的 Angular 應(yīng)用的 DOM 樹中，每個 DOM 元素都被加上了一些額外的屬性。

  
Mister Fantastic

  
    
Team

  

生成出的屬性分為兩種：
1、一個元素在原生封裝方式下可能是 Shadow DOM 的宿主，在這里被自動添加上一個 _nghost 屬性。 這是組件宿主元素的典型情況。
2、組件視圖中的每一個元素，都有一個 _ngcontent 屬性，它會標記出該元素是哪個宿主的模擬 Shadow DOM。

用法如下：

import { Component, OnInit, ViewEncapsulation } from "@angular/core";
@Component({
    selector: "app-factor_analysi",
    templateUrl: "./factor_analysis.component.html",
    styleUrls: ["./factor_analysis.component.scss"],
    providers: [factor_analysis_api],
    encapsulation: ViewEncapsulation.None
})

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/117145.html

相關(guān)文章

  • Angular2 VS Angular4 深度對比：特性、性能

    摘要：的特性和性能是的超集，用于幫助的開發(fā)。注解提供了連接元數(shù)據(jù)和功能的工具。通過在庫中提供基本信息可以調(diào)用函數(shù)或創(chuàng)建類的實例來檢查相關(guān)元數(shù)據(jù)，從而簡化了對象實例的構(gòu)建。停用它會響應(yīng)跳出舊控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web應(yīng)用開發(fā)領(lǐng)域，Angular被認為是最好的開源JavaScri...

    孫淑建 評論0 收藏0

  • Angular 2 快速上手

    摘要：為了簡單起見，在本文中將會使用。已經(jīng)實例化了并且將它的模板載入到了元素中。中的依賴注入發(fā)生在該類的構(gòu)造函數(shù)中，因此我們將在構(gòu)造函數(shù)中注入。 國內(nèi) Angular2 資料比較少，這里看到一篇不錯的入門文章就分享過來了 —— Angular 2 快速上手，這里面還有很多有關(guān)于 Angular2 的文章，感興趣的朋友可以去看一看 目前angular2已經(jīng)來到了beta版，這意味著它已經(jīng)做好了...

    singerye 評論0 收藏0

  • Angular 2.x+ 臟檢查機制理解

    摘要：策略減少檢測次數(shù)當輸入屬性不變時，可以跳過整個變更檢測子樹?，F(xiàn)在當執(zhí)行更改檢測時，它將從上到下進行。并且一旦更改檢測運行結(jié)束，它將恢復(fù)整個樹的狀態(tài)。 Angular 2.x+ 臟檢查機制理解 目前幾種主流的前端框架都已經(jīng)實現(xiàn)雙向綁定特性，但實現(xiàn)的方法各有不同： 發(fā)布者-訂閱者模式（backbone.js） 臟值檢查（angular.js） 數(shù)據(jù)劫持 + 發(fā)布者-訂閱者模式（vue.j...

    W4n9Hu1 評論0 收藏0

  • AngularJS簡述

    流行框架 簡介 angularjs是一款非常優(yōu)秀的前端高級JS框架，由谷歌團隊開發(fā)維護，能夠快速構(gòu)建單頁web應(yīng)用，化繁為簡 無論是angularjs還是jQuery都是用原生JS封裝的 庫：對代碼進行封裝，調(diào)用封裝的方法，簡化操作 傳統(tǒng)方式是用get方式獲取元素，然后點方法 jQuery庫實現(xiàn)了對獲取方式的封裝，對方法的封裝 框架：提供代碼書寫規(guī)則，按照規(guī)則去寫代碼，框架會幫我們實現(xiàn)響應(yīng)的功能...

    Jason 評論0 收藏0

  • Angular2， NativeScript 和 React Native比較[翻譯]

    摘要：當開始使用來提供真正的跨平臺應(yīng)用時，他發(fā)現(xiàn)對的緊耦合的依賴性在用開發(fā)應(yīng)用創(chuàng)建映射時呈現(xiàn)的問題。的重點放在高性能的渲染和執(zhí)行上，你可以很輕松的創(chuàng)建高性能的跨平臺應(yīng)用，這些應(yīng)用可以在相同的代碼庫上運行并且隨意使用特點平臺的組件。 showImg(https://segmentfault.com/img/bVJi8d?w=980&h=400); 在開發(fā)階段，跨平臺開發(fā)App面臨一個很重要的決...

    cooxer 評論0 收藏0

發(fā)表評論

0條評論

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