CSS is not working in my angular component

问题:

I am trying to make a simple Angular4 web app that will show and X or O depending on what the rating is. I do not see the X or O in my web app.

The CSS classes in my rating.component.ts file are not working. My project is compiling because I can add text to my rating component template and it will show up on the webpage, but I cannot see the CSS that suppose to be rendered.

My app component:

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

export class AppComponent {
}

My rating component:

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; 
    } 
}

My Css:

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

回答1:

I believe the problem you’re having is because you’re declaring the styleUrls on the parent component and due to encapsulation they are not available in the child component. You have to move it to the rating component.

In case you want to keep it on the level you currently have you need to make the view encapsulation none on the rating component.

selector: 'rating',
encapsulation: ViewEncapsulation.None

I believe you also are misusing the content css property. You need to used either the ::before or ::after pseudo elements

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

回答2:

update

::slotted is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom

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

original

You need to add the CSS (['./app.component.css']) to RatingComponent, otherwise style encapsulation will prevent the CSS to be applied.

Alternatively, you can use ::ng-deep

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

or ViewEncapsulation.None on the RatingComponent

but I'd suggest to stick with the first option.

See also https://blog.thoughtram.io/angular/2015/06/29/shadow