CSS在我的角度组件中不起作用 [英] CSS is not working in my angular component

问题描述

我正在尝试制作一个简单的Angular4网络应用程序，该应用程序将根据等级是X或O来显示.我在网络应用中看不到X或O.

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.

我的rating.component.ts文件中的CSS类无法正常工作.我的项目正在编译中，因为我可以将文本添加到评分组件模板中，并且该文本将显示在网页上，但是我看不到应该呈现的CSS.

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.

我的应用程序组件:

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

推荐答案

我相信您遇到的问题是因为您在父组件上声明了styleUrls，并且由于封装原因，它们在子代中不可用成分.您必须将其移至评分组件.

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

我相信您也正在滥用Content CSS属性.您需要使用::before或::after伪元素

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

这篇关于CSS在我的角度组件中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！