Angular父組件內(nèi)修改子組件的樣式

問題的產(chǎn)生與描述

在使用NG-ZORRO組件的過程中，需要根據(jù)產(chǎn)品的需要，在某些頁面修改某些NZ組件的樣式。但是由于angular默認采用了Emulated的視圖封裝模式，導(dǎo)致即便我們想在父組件中直接去重寫子組件的樣式，也無法辦到。

創(chuàng)新互聯(lián)建站一直秉承“誠信做人，踏實做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個客戶多一個朋友！為您提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都外貿(mào)網(wǎng)站建設(shè)、成都網(wǎng)頁設(shè)計、微信平臺小程序開發(fā)、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、手機APP定制開發(fā)是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計公司，等你一起來見證！

例如AppComponent是一個"父組件",其內(nèi)包含Comp1Component與Comp2Component兩個"子組件"。即使我在AppComponent中添加樣式如下樣式，然而組件1的字體顏色依然沒有變成紅色。設(shè)置在控制臺選中組件1，styles中根本沒有對應(yīng)的樣式。

.f-red{
    color: red;
}

/* 企圖修改組件1的字體顏色 */
#comp1{
    color: red;
}

問題分析

angular組件的CSS樣式被封裝進了自己的視圖中，而不會影響到應(yīng)用程序的其它組件,這個效果在大部分時候非常的有用,我們不用擔心某個組件的代碼會污染其子組件,但當我們想改變第三方庫的樣式的時候也非常的麻煩。angular的視圖封裝模式默認是Emulated 模式,以下是官方對其功能的描述。

通過預(yù)處理（并改名）CSS 代碼來模擬 Shadow DOM 的行為，以達到把 CSS 樣式局限在組件視圖中的目的。

其實如果在html中搜索#comp1,會得到如下的結(jié)果。angular默認的為每個組件添加了一個屬性，同樣也為css限定了對應(yīng)的屬性。這也是為什么在"父組件"修改"子組件"不生效,因為根本找不到#comp1[_ngcontent-haw-c0]選擇器對應(yīng)的元素。

解決辦法

可以使用 /deep/、>>>或::ng-deep選擇器來強制一個樣式對各級子組件的視圖也生效，它不但會作用于組件的子視圖，也會作用于投影進來的內(nèi)容(ng-content)。

.f-red{
    color: red;
}

/* 企圖修改組件1的字體顏色 */
/* :host ::ng-deep #comp1{
    color: red;
} */
:host /deep/ #comp1{
    color: red;
}

需要注意的是CSS標準中用于"刺穿 Shadow DOM"的組合器已經(jīng)被廢棄，并將這個特性從主流瀏覽器和工具中移除。angular官方建議統(tǒng)一使用 ::ng-deep，以便兼容將來的工具。

文章標題：Angular父組件內(nèi)修改子組件的樣式
當前地址：http://bm7419.com/article32/jjccsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、面包屑導(dǎo)航、企業(yè)建站、做網(wǎng)站、搜索引擎優(yōu)化、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)