CSS 在我的 Angular 组件中不起作用

Question

我正在尝试制作一个简单的 Angular4 网络应用程序，它会根据评级显示 X 或 O。我在我的网络应用程序中没有看到 X 或 O。

我的 rating.component.ts 文件中的 CSS 类不起作用。我的元素正在编译，因为我可以将文本添加到我的评级组件模板，它会显示在网页上，但我看不到应该呈现的 CSS。

我的应用组件:

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

export class AppComponent {
}

我的评分组件:

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

我的CSS:

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

Answer 1

我认为您遇到的问题是因为您在父组件上声明了 styleUrls 并且由于封装它们在子组件中不可用。您必须将其移至评级组件。

如果您想将其保持在当前水平，您需要在评级组件上不封装 View 。

selector: 'rating',
encapsulation: ViewEncapsulation.None

我相信您也在滥用 content css 属性。您需要使用 ::before 或 ::after 伪元素

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