CSS 在我的角度组件中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47850510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS is not working in my angular component
提问by GlobalJim
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.
我正在尝试制作一个简单的 Angular4 Web 应用程序，该应用程序将根据评级显示 X 或 O。我在我的 Web 应用程序中没有看到 X 或 O。
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.
我的 rating.component.ts 文件中的 CSS 类不起作用。我的项目正在编译，因为我可以将文本添加到我的评级组件模板，它会显示在网页上，但我看不到假设要呈现的 CSS。
My app component:
我的应用程序组件：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<rating></rating>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
My rating component:
我的评分组件：
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;
}
}
My Css:
我的CSS：
.star.star-full-icon{
content:'X';
}
.star.star-empty-icon{
content:'O';
}
回答by Hugo Noro
I believe the problem you're having is because you're declaring the styleUrlson the parent component and due to encapsulation they are not available in the child component. You have to move it to the rating component.
我相信您遇到的问题是因为您在styleUrls父组件上声明了，并且由于封装，它们在子组件中不可用。您必须将其移至评级组件。
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
I believe you also are misusing the content css property. You need to used either the ::beforeor ::afterpseudo elements
我相信您也滥用了 content css 属性。您需要使用::before或::after伪元素
.star.star-full-icon::after{
content:'X';
}
.star.star-empty-icon::after{
content:'O';
}
回答by Günter Z?chbauer
update
更新
::slottedis now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom
::slotted现在所有新浏览器都支持，并且可以与`ViewEncapsulation.ShadowDom 一起使用
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
original
原来的
You need to add the CSS (['./app.component.css'])to RatingComponent, otherwise style encapsulation will prevent the CSS to be applied.
您需要添加 CSS ( ['./app.component.css'])to RatingComponent，否则样式封装将阻止应用 CSS。
Alternatively, you can use ::ng-deep
或者，您可以使用 ::ng-deep
::ng-deep .star.star-full-icon{
content:'X';
}
::ng-deep .star.star-empty-icon{
content:'O';
}
or ViewEncapsulation.Noneon the RatingComponent
或ViewEncapsulation.None在RatingComponent
but I'd suggest to stick with the first option.
但我建议坚持第一个选项。
See also https://blog.thoughtram.io/angular/2015/06/29/shadow
