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

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

原文由 GlobalJim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

如果您想将其保持在您当前拥有的级别，您需要在评级组件上使视图封装为无。

 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 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

或 ViewEncapsulation.None 在 RatingComponent

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

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

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 4.0 许可协议