Composants enfants de style à partir du fichier CSS du composant parent

Question

J'ai un composant parent:

<parent></parent>

Et je veux remplir ce groupe, avec des composants enfants:

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>

Modèle Parent:

<div class="parent">
  <!-- Children goes here -->
  <ng-content></ng-content>
</div>

Enfant modèle:

<div class="child">Test</div>

Depuis parent et child sont séparer les deux composants, leurs styles sont enfermés dans leur propre champ d'application.

Dans mon composant parent j'ai essayé de faire:

.parent .child {
  // Styles for child
}

Mais l' .child styles ne sont pas transférées à l' child composants.

J'ai essayé d'utiliser styleUrls d'inclure l' parent's de la feuille de style en child de la composante de résoudre le problème de portée:

// child.component.ts
styleUrls: [
  './parent.component.css',
  './child.component.css',
]

Mais cela n'a pas aidé, a également essayé l'autre sens par l'extraction de l' child de la feuille de style en parent , mais cela n'a pas aidé non plus.

Alors, comment faites-vous le style de l'enfant composants qui sont inclus dans un composant parent?

Answer 1

Mise À Jour - Nouvelle Façon

Ne pas le faire, si vous pouvez l'éviter. Comme Devon Sans points dans les commentaires: Cette fonctionnalité sera probablement obsolète.

Mise À Jour - Nouvelle Méthode

À partir Angulaire 4.3.0, tous les piercing css combinartors ont été désapprouvées. Angulaire de l'équipe a introduit un nouveau combinateur ::ng-deep (il est encore au niveau expérimental et non pas la pleine et définitive) comme indiqué ci-dessous,

DÉMO : https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview

styles: [
    `
     :host { color: red; }

     :host ::ng-deep parent {
       color:blue;
     }
     :host ::ng-deep child{
       color:orange;
     }
     :host ::ng-deep child.class1 {
       color:yellow;
     }
     :host ::ng-deep child.class2{
       color:pink;
     }
    `
],



template: `
      Angular2                                //red
      <parent>                                //blue
          <child></child>                     //orange
          <child class="class1"></child>      //yellow
          <child class="class2"></child>      //pink
      </parent>      
    `

---

Ancienne

Vous pouvez utiliser encapsulation mode et/ou piercing CSS combinators >>>, /deep/ and ::shadow

exemple : http://plnkr.co/edit/1RBDGQ?p=preview

styles: [
    `
     :host { color: red; }
     :host >>> parent {
       color:blue;
     }
     :host >>> child{
       color:orange;
     }
     :host >>> child.class1 {
       color:yellow;
     }
     :host >>> child.class2{
       color:pink;
     }
    `
    ],

template: `
  Angular2                                //red
  <parent>                                //blue
      <child></child>                     //orange
      <child class="class1"></child>      //yellow
      <child class="class2"></child>      //pink
  </parent>      
`

Answer 2

Mise à JOUR 3:

::ng-deep est également déconseillé ce qui signifie que vous ne devriez pas le faire du tout. Il est difficile de savoir comment cela affecte les choses où vous en avez besoin pour remplacer les styles dans les composants enfants à partir d'un composant parent. Pour moi, il semble étrange que cela devient complètement supprimé, car comment aurait-il une incidence sur les choses que les bibliothèques où vous en avez besoin pour remplacer les styles dans un composant de la bibliothèque?

Commenter si vous avez tout bien comprendre cette.

Mise à JOUR 2:

Depuis /deep/ et tous les autres de l'ombre piercing sélecteurs sont désormais obsolète. Angulaire chuté ::ng-deep qui devrait être utilisé à la place pour une plus large compatibilité.

Mise à JOUR:

Si vous utilisez Angulaires-CLI, vous devez utiliser /deep/ au lieu de >>> , sinon cela ne fonctionnera pas.

ORIGINE:

Après Angular2 de Github page et de faire une recherche aléatoire pour le "style" je trouve cette question: Angulaire 2 - innerHTML style

Qui a dit d'utiliser quelque chose qui a été ajoutée en 2.0.0-beta.10, >>> et ::shadow sélecteurs.

(>>>) (et l'équivalent/deep/) et ::shadow ont été ajoutées dans la version 2.0.0-bêta.10. Ils sont semblables à l'ombre DOM CSS combinators (qui sont obsolètes) et fonctionnent uniquement avec l'encapsulation: ViewEncapsulation.Émulé qui est la valeur par défaut dans Angular2. Ils ont probablement aussi travailler avec ViewEncapsulation.Aucun mais alors seulement ignorés parce qu'ils ne sont pas nécessaires. Ces combinators ne sont qu'une solution intermédiaire, jusqu'à ce que des fonctionnalités plus avancées pour la croix-composant style est pris en charge.

Donc, simplement en faisant:

:host >>> .child {}

En parent's d'un fichier de style a résolu le problème. Veuillez noter que, comme indiqué dans la citation ci-dessus, cette solution n'est intermédiaires jusqu'à la plus avancée de la croix-composant style est pris en charge.

Answer 3

Malheureusement, il semble que le /de profondeur/ sélecteur est obsolète (au moins dans google Chrome) https://www.chromestatus.com/features/6750456638341120

En bref, il semble qu'il y est pas (encore) de solution à long terme autres que pour en quelque sorte faire de votre enfant un composant de style les choses de façon dynamique.

Vous pouvez passer d'un objet de style pour votre enfant et de son application par l'intermédiaire de:
<div [attr.style]="styleobject">

Ou si vous avez un style spécifique, vous pouvez utiliser quelque chose comme:
<div [style.background-color]="colorvar">

Plus de discussion au sujet de ceci: https://github.com/angular/angular/issues/6511

Answer 4

Même problème, donc si vous utilisez angular2-cli avec scss / sass, utilisez '/ deep /' au lieu de '>>>', le dernier sélecteur n'est pas encore supporté (mais fonctionne très bien avec css).

Answer 5

Si vous souhaitez être plus ciblé sur le composant enfant réel, vous devriez suivre les étapes suivantes. De cette façon, si d'autres composants enfants partagent le même nom de classe, ils ne seront pas affectés.

Plunker: https://plnkr.co/edit/ooBRp3ROk6fbWPuToytO?p=preview

Par exemple:

 import {Component, NgModule } from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>I'm the host parent</h2>
      <child-component class="target1"></child-component><br/>
      <child-component class="target2"></child-component><br/>
      <child-component class="target3"></child-component><br/>
      <child-component class="target4"></child-component><br/>
      <child-component></child-component><br/>
    </div>
  `,
  styles: [`

  /deep/ child-component.target1 .child-box {
      color: red !important; 
      border: 10px solid red !important;
  }  

  /deep/ child-component.target2 .child-box {
      color: purple !important; 
      border: 10px solid purple !important;
  }  

  /deep/ child-component.target3 .child-box {
      color: orange !important; 
      border: 10px solid orange !important;
  }  

  /* this won't work because the target component is spelled incorrectly */
  /deep/ xxxxchild-component.target4 .child-box {
      color: orange !important; 
      border: 10px solid orange !important;
  }  

  /* this will affect any component that has a class name called .child-box */
  /deep/ .child-box {
      color: blue !important; 
      border: 10px solid blue !important;
  }  


  `]
})
export class App {
}

@Component({
  selector: 'child-component',
  template: `
    <div class="child-box">
      Child: This is some text in a box
    </div>
  `,
  styles: [`
    .child-box {
      color: green;    
      border: 1px solid green;
    }
  `]
})
export class ChildComponent {
}


@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, ChildComponent ],
  bootstrap: [ App ]
})
export class AppModule {}
 

J'espère que cela t'aides!

codematrix