Angular 2如何風格transcluded元素？

Question

<component> 
    <p class="component-p"></p> 
</component> 

component樣式表：

.component-p { 
    color: red; 
} 

:host .component-p { 
    color: red; 
} 

:host >>> .component-p { 
    color: red; 
} 

>>> .component-p { 
    color: red; 
} 

::content .component-p { 
    color: red; 
} 

這些都不似乎工作，但我不明白爲什麼。

如果我把::content .component-p放在這個父組件中，那麼它可以工作，但這沒有任何意義，因爲我沒有將它轉化爲父項，而是將其轉化爲component。

你是如何定義transcluded內容的？

Answer 1

注意：有很多方法可以做到這一點。但在這裏，我正在使用你從子組件ng-content element/control如何設計風格子組件。

使用:host >>> .component-p選擇transcluded元素，如此處所示。

styles: [` 
       :host >>> .component-p {color:red;} 
     `] 

這個按預期工作。

DEMO：https://plnkr.co/edit/z3urbPNvDXEnJZDMZo74?p=preview

Answer 2

爲transcluded元素的風格應該是在使用你的<component>的組件。例如，讓我們說我們有這個組件：

@Component({ 
     selector: 'app-other', 
     template: ` 
      <p>something here</p> 
      <ng-content></ng-content> 
     `, 
}) export class OtherComponent {} 

如果我們用這個在我們app.component，樣式爲走了進去ng-content必須在這裏寫的代碼。

@Component({ 
    selector: 'app-root', 
    template: ` 
     <app-other> 
      <p class="component-p">some things</p> 
     </app-other> 
    `, 
    styles: [` 
     .component-p { 
      color: red; 
     } 
    `] 
}) export class AppComponent {} 

Answer 3

使用角度cli時使用:host /deep/ .component-p。

https://medium.com/google-developer-experts/angular-advanced-styling-guide-v4-f0765616e635