CSS在我的角度组件中不起作用

Question

我正在尝试创建一个简单的Angular4 Web应用程序,它将显示和X或O,具体取决于评级.我在我的网络应用程序中看不到X或O.

我的rating.component.ts文件中的CSS类不起作用.我的项目正在编译,因为我可以将文本添加到我的评级组件模板,它将显示在网页上,但我看不到想要呈现的CSS.

我的app组件:

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父组件上声明了它,并且由于封装它们在子组件中不可用.您必须将其移至评级组件.

如果您希望将其保持在当前级别,则需要在评级组件上进行视图封装.

selector: 'rating',
encapsulation: ViewEncapsulation.None

我相信你也在滥用内容css属性.您需要使用::before或::after伪元素

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

Answer 2

更新

::slotted 现在，所有新浏览器都支持该功能，并且可以与`ViewEncapsulation.ShadowDom一起使用

https://developer.mozilla.org/zh-CN/docs/Web/CSS/::slotted

原版的

您需要添加CSS（['./app.component.css'])到RatingComponent，否则样式封装将阻止CSS的应用。

或者，您可以使用 ::ng-deep

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

或ViewEncapsulation.None在RatingComponent

但我建议您坚持使用第一种方法。

另请参阅https://blog.thoughtram.io/angular/2015/06/29/shadow