Question

我正在尝试创建一个简单的Angular4 Web应用程序，它将显示和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并且由于封装它们在子组件中不可用。您必须将其移至评级组件。

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

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/en-US/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';
}

{p}或ViewEncapsulation.None

上的RatingComponent

但我建议坚持使用第一个选项。

另见https://blog.thoughtram.io/angular/2015/06/29/shadow

Answer 3

如果您不想弄乱ViewEncapsulation并仍然拥有样式隔离，请在组件选择器前面加上you can define the style within your global css file（例如styles.scss）：

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

这已在Angular 10 Web应用程序中进行了测试。

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

3 个答案: