自定義樣式 <ng-content> 在angular2不工作？

Question

我正在嘗試使用內聯css設置<ng-content>樣式，但似乎樣式不適用於ng-content，我必須為樣式做些其他事情？

<ng-content class="red"></ng-content> <p class="red">hello</p>

這里的班級紅色在p上工作但不在

工作實例

Answer 1

::content被忽略。

這個結束了

您可以使用::content選擇器

styles: ['.red {color:red} :host >>> upper {color:green}']

要么

styles: ['.red {color:red} :host >>> * {color:green}']

如果有LESS用戶，似乎LESS編譯器不喜歡>>>語法，所以你需要為它添加一個別名，例如。 @deep: ~">>>"; 然后使用@{deep} { /* your deep styles here */ }

另見本討論https://github.com/angular/angular/issues/7400#issuecomment-246922468

您可以使用 ::content選擇器

 
 
 
  
  styles: ['.red {color:red} ::content >>> upper {color:green}']
 
  

要么

 
 
 
  
  styles: ['.red {color:red} ::content >>> * {color:green}']
 
  

根據web組件spec ::content應該足夠了， >>>不應該被要求但是沒有它就沒有應用樣式。

Plunker的例子

Answer 2

實際上，它是因為被輸入內容所取代。 該元素不存在於內存中的DOM中。

關於你的樣品，使用upper ：

<upper>Some text</upper>

具有以下模板：

<ng-content class="red"></ng-content> <p class="red">hello</p>

你將在DOM中擁有它：

<upper _nghost-dks-2="">
  Some text <p _ngcontent-dks-2="" class="red">hello</p>
</upper>

因此，您不能在ng-content上使用class="red" 。

Answer 3

嘗試將css添加到父css文件中： app/src/style.css

不要進入組件的styleUrls的css文件（你在組件中包含了這樣的styleUrls: ['design.css'] ）

Answer 4

只需包裝ng-content並使用css在里面選擇它？

<div class="red"><ng-content></ng-content></div>

CSS：

.red > * {
    color: red;
}