在Angular元件中引入外部樣式的方法

     在angular專案中，如果使用到js封裝的一些插件，需要手動引入js檔案和css文件，如果在應用程式入口頁直接使用link方式引入的話，會阻塞首屏的加載，甚至會產生冗餘的樣式表；下面是一種在元件內引用外部樣式的方法。

首先介紹Angular的一個枚舉類別：

enum ViewEncapsulation {
  Emulated
  Native
  None
}

ViewEncapsulation 的值是用來指定，在封裝Angular元件的時候，如何處理樣式和標籤之間的關係，預設值是：ViewEncapsulation.Emulated;
用法是：

import { ViewEncapsulation } from "@angular/core";@Component({
  templateUrl: "./login.html",
  styleUrls: ['./login.css','/bootstrap/css/bootstrap.min.css'],
  encapsulation: ViewEncapsulation.Emulated
})

ViewEncapsulation.Emulated

這種方式在封裝元件的時候，會為元件分配一個唯一的屬性，並將這個屬性添加到元件內的每一個標籤上，封裝後的樣式表的選擇器中會加上屬性選擇器，從而形成了一個樣式表的作用域，域內樣式不會影響外部，但是元件會受到父級樣式的影響，如圖：

ViewEncapsulation.Native

這種方式把元件封裝成一個shadow DOM；

#ViewEncapsulation.None

這種方法的樣式表為全域的作用域，元件中宣告的樣式既可以影響本元件，同時也會影響全域樣式表；反過來，元件收全域樣式表的影響。

兩種情況：
1、外部樣式表作用的標籤是靜態的（如bootstrap）:

直接在元件元資料中引入，使用預設方式：

@Component({  templateUrl: "./login.html",  styleUrls: ['./login.css','/bootstrap/css/bootstrap.min.css']
})

2、樣式表作用於動態創建的標籤（如創建一個富文本編輯器CKEditor，wangEditor等）：

因為標籤是動態創建的，也就是說打包組件的時候，引入的外部樣式表作用的標籤尚未存在（程式碼運行的時候，new一個Editor之後才會創建標籤），而打包的時候卻給所有選擇器都添加了一個屬性選擇器，因此，動態創建的標籤就不會被引入的樣式表影響。也就是說新建立的標籤不屬於元件這個作用域。為了避免這種情況，只能在打包元件的時候，不給這個元件創建作用於：

import { ViewEncapsulation } from "@angular/core";@Component({
  templateUrl: "./login.html",
  styleUrls: ['./login.css','/bootstrap/css/bootstrap.min.css'],
  encapsulation: ViewEncapsulation.None})

以上是在Angular元件中引入外部樣式的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！