AngularJS 2 styleUrls：怎麼樣連接？

我的AngularJS 2應用程序有幾個樣式文件，我與gulp任務連接。這一切都很好，因爲它們最終會在我發送給瀏覽器的大文件中生成。我的問題是關於Angular 2 @Component及其styleUrls屬性。AngularJS 2 styleUrls：怎麼樣連接？

@Component({ 
    selector: 'hero', 
    templateUrl: 'hero/hero.template.html', 
    styleUrls: ['hero/hero.component.css'], 

    inputs: ['hero'] 
})

由於影子默認模式（模擬）在hero/hero.component.css定義的樣式僅應用於就像我希望組件DOM仿真。我的問題是，連接會發生什麼？我無法將多個styleUrls中指定的所有CSS文件捆綁在一起，因爲我們將破壞封裝的目的：組件的樣式會泄漏到整個文檔中。但是，我不想爲組件需要的每個CSS文件進行生產調用。我如何連接這些樣式（並可能縮小它們），以便客戶端在一次調用中獲得全部樣式，並仍保留封裝？

來源

2016-03-06 Carlos Romero

那麼，我使用typescript和npm來處理角度2，我觀察到在幕後，所有styleUrls會先自動提取，然後在頭部內聯，然後發送到瀏覽器。這種方法有問題嗎？ – mehulmpt

你的意思是指定'styleUrls'的每個組件都有一個請求獲取每個文件，對吧？它確實有效，我想知道它是否可以以某種方式簡化爲單一調用（適用於生產環境）。 –

我相信樣式不應該連接在一起，而應與組件捆綁在一起，例如通過gulp-inline-ng2-template。 – estus

可以使用系統js插件將模板和css文件捆綁在js文件中。

import { Component } from '@angular/core'; 

import html from './hero/hero.template.html!text'; 
import css from './hero/hero.component.css!text'; 

@Component({ 
    selector: 'hero', 
    template: html, 
    styles: [css], 
}) 
export class HeroComponent implements { 
}

來源

2016-09-28 18:01:47

AngularJS 2 styleUrls：怎麼樣連接？

回答

相關問題