我的Angular组件中CSS无法工作

Question

我正在尝试制作一个简单的Angular4 Web应用程序，根据评级显示X或O。但我在Web应用程序中看不到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';
}

- GlobalJim

---

是的！在CSS中添加:before起作用了。@serpent5 - GlobalJim

Answer 1

我相信您遇到的问题是因为您在父组件上声明了 styleUrls，由于封装性，它们在子组件中不可用。您需要将其移动到评分组件中。

如果您想保持当前级别，您需要在评分组件上设置视图封装为 none。

selector: 'rating',
encapsulation: ViewEncapsulation.None

我相信你也在错误地使用content CSS属性。你需要使用::before或者::after伪元素。

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

- Hugo Noro

---

这个没起作用。页面还是空白的。不过感谢您提供的信息。 - GlobalJim

但是这些类是否设置在元素上了？ - Hugo Noro

正确。我看到这个：<i _ngcontent-c0="" class="star star-empty-icon"></i> - GlobalJim

你把styleUrls移到了ratings组件里，对吧？ - Hugo Noro

非常有趣！ - petrosmm

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

或在 RatingComponent 上使用 ViewEncapsulation.None，但我建议坚持使用第一种选择。

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

- Günter Zöchbauer

---

这个没有起作用。还是一张空白页面。不过还是谢谢你提供的信息。 - GlobalJim

ng-deep即将被弃用 :) - Hugo Noro

不，它不会。当所有的浏览器都能够很好地支持“原生”的时候，“仿真”就不再需要了。 - Günter Zöchbauer

你是否检查了DOM，确认类名是否按预期设置？ - Günter Zöchbauer

示例应以::ng-deep开始（而不是: ng-deep）。双冒号是必要的。 - Mutual Exception

Answer 3

如果您不想处理ViewEncapsulation，但仍需要样式隔离，您可以在全局CSS文件（例如styles.scss）中使用组件选择器前缀定义样式。请保留HTML标签。

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

这是在一个 Angular 10 的 Web 应用程序中测试的。

- Alexei - check Codidact