web-dev-qa-db-fra.com

Le style angulaire 2 ne s'applique pas au composant enfant

J'essaie d'appliquer un style à une balise de composant enfant, mais je ne peux pas le faire. 

J'ai un composant enfant avec une balise d'ancrage. 

Même si j'ai un style pour la balise d'ancrage dans le composant parent, il ne s'applique pas. Quelle est la solution pour cela?

Code de travail: http://plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview

 <a href="https://www.google.com">Google</a>

Dans le composant parent, j'utilise le composant enfant et applique un style à ce composant enfant.

Code HTML:

<div class="container">
  <div class="test">
    <testapp></testapp>
  </div>
</div>

Code css:

.container{
  font-family:sans-serif;
  font-size:18px;
  border: 1px solid black;
}
.test{
  width:50%;
  background-color:#f0f5f5;
}

.container:hover .test{
  background-color:#e6ffe6;
}
.container:hover .test:hover{
  background-color:#ffffe6;
}
.container .test a {
    color:   red ;
}
.container .test a:hover {
    color:green;
}
htmlcsscss3angularangular2-template
27
Varun

C'est parce que par défaut, les composants ont une encapsulation de vue (shadow dom). Pour désactiver ce comportement, vous pouvez utiliser l'attribut encapsulation, comme décrit ci-dessous:

import {Component, ViewEncapsulation} from '@angular/core';
import {TestApp} from 'testapp.component.ts';
@Component({
  selector:'test-component',
  styleUrls: ['test.component.css'],
  templateUrl: './test.component.html',
  directives:[TestApp],
  encapsulation: ViewEncapsulation.None // <------
})
export class TestComponent{

}

Voir ceci: http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview .

58
Thierry Templier

Lorsque vous utilisez la propriété styleUrls, les styles sont local pour le composant one, pas pour ses enfants. J'ai donc apporté deux modifications: 1) A déplacé le styleUrls vers le composant testapp. 2.

import {Component} from '@angular/core';
@Component({
 selector:'testapp',
 styleUrls: ['./test.component.css'],
 template: `
 <div class="test">
  <a href="https://www.google.com">Google</a>
 </div>

 `

})
export class TestApp{

}
2
DeborahK

EDITED: Cela devrait résoudre:

Dans le css de la classe enfant, écrivez en dessous du code

:Host.parentclass childclass{

}

La classe parent est le parent immédiat de l'enfant. childclass est la classe appliquée au composant enfant.

0
RPD