角度2超過要素をスタイルする方法は？

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という子に変換するので意味がありません。

トランスコードされたコンテンツをどのようにスタイル設定しますか？

Answer 1

：これを実行する方法は多数あります。しかし、ここで私はng-content element/controlを子コンポーネントからスタイルする方法を使用しています。

:host >>> .component-pを使用して、ここに示すような継ぎ目のない要素を選択します。

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

期待どおりに動作します。

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

Answer 2

トランスクルード要素のスタイルは、あなたの<component>が使用されているコンポーネントにする必要があります。例えば、我々は、このコンポーネントを持っているとしましょう：私たちは私たちのapp.componentでこれを使用する場合は

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

、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

angle-cliを使用する場合は:host /deep/ .component-pを使用してください。

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