Angular 2應用程序中的組件共享樣式

我的Angular 2應用程序中有一些CSS規則，這些規則在各種組件中都很常見。很明顯，我不想複製&將它們粘貼到每個組件的樣式中。我現在有2個想法：Angular 2應用程序中的組件共享樣式

將共同CSS規則的靜態CSS文件，包括它用我的index.html的head部分的鏈接。
將我的常用CSS規則放在一個或多個文件中，並將它們包含在每個組件的裝飾器中，例如@Component。 styleUrls: [ './myComponentStyle.css', '../common/common.css']

第一種方法看起來不那麼棱角十歲上下給我，但同時它肯定工作，很容易實現。

第二個需要對每個組件進行一些工作，但允許更多地控制某個組件正在使用的樣式。它還讓我能夠將我的通用樣式組織成更小的樣式表，並僅使用需要的樣式表。

你喜歡這些解決方案嗎？還是有更好的解決方案？ :)

來源

2016-02-29 krazimierz

有3種方式在angular2應用程序中使用樣式（link）。你已經提到了那些允許你重用樣式的那些。

我個人認爲，對於任何大型應用程序來說，它最好與＃2一起使用，主要是由於角度提供的視圖封裝。

＃1可用於真正非常通用的樣式，這些樣式對於您的應用程序的所有部分都是通用的。但是，如果你會考慮到你的SPA中的根本就是角度分量，那麼就沒有必要再用另一種連接方式，而不是＃2。

而且通過兩種不同的方式使用CSS，你必須記住這一點（有一些額外的代碼處理）時，例如捆綁您的應用程序，並使用類似一飲而盡，直列NG2模板工具

來源

2016-02-29 16:37:25 Amid

這個解決方案很好，但它更適用於任何常見樣式，這些樣式應該適用於所有組件。例如，CSS網格的樣式。爲了使它更angularish你可以應用組件組封裝爲你無：

`@Component({ 
    selector: 'my-app', 
    template: ` `, 
    styleUrls: ["shared.style.css"], 
    encapsulation: ViewEncapsulation.None 
}) export class App {}`

Demo could be found here (plunker)

注：樣式，通過這個方式（只是添加樣式標籤，或與非封裝）包括將影響您網頁上的所有元素。有時它是我們真正想要的（同意爲洞項目使用任何css框架）。但是，如果只想在少數組件之間共享樣式 - 那可能不是最好的方式。

Summary: 
(+) easy to use 
(-) no encapsulation

2.我喜歡這個解決方案，因爲它是非常可以理解的，具有可預測的行爲。 但它有一個問題：

它會在您每次使用共享樣式時添加樣式標籤。這可能是一個問題，如果你有很大的風格文件，或許多使用它的元素。

@Component({ 
    selector: 'first', 
    template: `<h2> <ng-content> </ng-content> </h2>`, 
    styleUrls: ["shared.style.css"] 
}) 
export class FirstComponent {}

Demo could be found here (plunker)

Summary: 
(+) easy to use 
(+) encapsulation 
(-) duplicates styles for every usage

有可以使用多一個選擇。只需創建一個組件，它將爲其子組件提供共享樣式。

` <styles-container> 
    <first> first comp </first> 
    </styles-container> 
    <styles-container> 
    <second> second comp </second> 
    </styles-container>`

在這種情況下，你將不得不使用/深/在你的風格，使可用的樣式子組件：

:host /deep/ h2 { 
    color: red; 
}

我還值得一提的是不要忘記使用：讓主人款式可用只有爲子元素。如果你忽略它，你將會獲得更多的全球風格。

Demo could be found here (plunker)

Summary: 
(-) you have to create container and it in templates 
(+) encapsulation 
(+) no duplicated styles

注：風格封裝是很酷的功能。但你也應該記住，沒有辦法限制你的深度風格。所以如果你使用了深色的款式，那麼它對所有的孩子都是絕對可用的，所以你也要小心使用它。

來源

2017-01-05 17:35:01 ilyabasiuk

Angular 2應用程序中的組件共享樣式

回答

相關問題