web-dev-qa-db-fra.com

CSS ne fonctionne pas dans mon composant angular

J'essaie de faire une application Web simple Angular4 qui montrera et X ou O en fonction de la note. Je ne vois pas le X ou le O dans mon application Web.

Les classes CSS de mon fichier rating.component.ts ne fonctionnent pas. Mon projet est en cours de compilation car je peux ajouter du texte à mon modèle de composant d'évaluation et il apparaîtra sur la page Web, mais je ne peux pas voir le code CSS qui doit être rendu.

Mon composant d'application:

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
        <rating></rating>
     `,
  styleUrls: ['./app.component.css']
})

export class AppComponent {
}

Mon composant d'évaluation:

import { Component } from '@angular/core';

@Component({ 
    selector: 'rating', 
    template: `                   
        <i class="star" 
        [class.star-empty-icon]="rating < 1" 
        [class.star-full-icon]="rating >= 1" 
        (click)="onClick(1)">
        </i>
        <i class="star" 
        [class.star-empty-icon]="rating < 2" 
        [class.star-full-icon]="rating >= 2" 
        (click)="onClick(2)">
        </i>
    `
})
export class RatingComponent{ 
    rating = 0; 
    onClick(ratingValue){ 
        this.rating = ratingValue; 
    } 
}

Mon Css:

.star.star-full-icon{
    content:'X';
}
.star.star-empty-icon{
    content:'O';
}
cssangular
16
GlobalJim

Je pense que le problème que vous rencontrez est dû au fait que vous déclarez styleUrls sur le composant parent et qu’en raison de l’encapsulation, ils ne sont pas disponibles dans le composant enfant. Vous devez le déplacer vers le composant d'évaluation.

Si vous souhaitez le conserver au niveau actuel, vous devez désactiver l’encapsulation de la vue sur le composant d’évaluation.

selector: 'rating',
encapsulation: ViewEncapsulation.None

Je crois que vous abusez également de la propriété css de contenu. Vous devez utiliser soit le ::before ou ::after pseudo-éléments

.star.star-full-icon::after{
    content:'X';
}
.star.star-empty-icon::after{
    content:'O';
}
33
Hugo Noro

mettre à jour

::slotted est maintenant supporté par tous les nouveaux navigateurs et peut être utilisé avec `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

original

Vous devez ajouter le CSS (['./app.component.css']) à RatingComponent, sinon l’encapsulation de style empêchera l’application de la CSS.

Alternativement, vous pouvez utiliser ::ng-deep

::ng-deep .star.star-full-icon{
    content:'X';
}
::ng-deep .star.star-empty-icon{
    content:'O';
}

ou ViewEncapsulation.None sur le RatingComponent

mais je suggérerais de s'en tenir à la première option.

Voir aussi https://blog.blingtram.io/angular/2015/06/29/shadow

5
Günter Zöchbauer