[英]Angular : CSS of one component is conflicting with another Component.
My project Hierarchy is as below: 我的项目层次结构如下:
Component_HomePage
|
|---> Component_Tool1
| |
| ---> Component_Inner_01
|
|---> Component_Tool2
|
---> Component_Inner_02
Obviously all Component are having different styling. 显然,所有Component都有不同的样式。
Though there are some CSS classes in Component_Inner_01
& Component_Inner_02
whose names are same but content is different. 尽管
Component_Inner_01
和Component_Inner_02
有一些CSS类,它们的名称相同但内容不同。
For example: 例如:
Component_Inner_01.CSS having list-group-item
class 具有
list-group-item
类的Component_Inner_01.CSS
.list-group-item{
padding: 0px;
}
And Component_Inner_02.CSS is also having list-group-item
but content is diff. Component_Inner_02.CSS也有
list-group-item
但内容是diff。
.list-group-item{
padding: 10px;
}
So for the first time when i browse Component_Inner_01
list-group-item takes padding as 0px, which is perfect. 因此,当我第一次浏览
Component_Inner_01
list-group-item时,填充为0px,这是完美的。
But when i view Component_Inner_01
page after viewing Component_Inner_02
page, list-group-item class of Component_Inner_01 is taking padding as 10px. 但是,当我在查看
Component_Inner_01
页面后查看Component_Inner_02
页面时, Component_Inner_02
列表组项类将填充设为10px。
I figured out the issue was in Component_Inner_02
我发现问题出在
Component_Inner_02
Component_Inner_02's decorator having metadata encapsulation
which is set to ViewEncapsulation.None
Component_Inner_02的装饰器具有设置为
ViewEncapsulation.None
元数据encapsulation
But i don't know what making CSS classes conflict with each other when having encapsulation: ViewEncapsulation.None
, Can anybody explain ? 但是我不知道什么使CSS类在进行
encapsulation: ViewEncapsulation.None
时彼此冲突encapsulation: ViewEncapsulation.None
,有人可以解释吗?
View encapsulation means that your view is encapsulated : it means Angular adds random attributes to your tags to distinct them from one to another. 视图封装意味着您的视图已被封装:这意味着Angular向标签添加随机属性以将它们彼此区分。
If you use encapsulation: ViewEncapsulation.None
, then your view isn't encapsulated anymore : styles don't have random attributes, and start conflicting. 如果您使用
encapsulation: ViewEncapsulation.None
,那么您的视图将不再被封装:样式没有随机属性,并开始发生冲突。
If you want to stop that, remove that line from your component. 如果要停止该操作,请从组件中删除该行。
the CLI provides a global style sheet called style.[extension]
where you can put all global styles. CLI提供了一个名为
style.[extension]
的全局样式表,您可以在其中放置所有全局样式。 You don't need to deactivate encapsulation. 您无需停用封装。
Instead of removing the line as #trichetriche said use the necessary encapsulation mechanism. 不要像#trichetriche所说的那样删除行,而是使用必要的封装机制。
FYI 费耶
ViewEncapsulation.Emulated
: Any styles we define on a component don't leak out to the rest of the application. ViewEncapsulation.Emulated
:我们在组件上定义的任何样式都不会泄漏到应用程序的其余部分。 But, the component still inherits global styles like twitter bootstrap . 但是,该组件仍继承诸如twitter bootstrap之类的全局样式。
ViewEncapsulation.Native
: Styles we set on a component do not leak outside of the components scope. ViewEncapsulation.Native
:我们在组件上设置的样式不会泄漏到组件范围之外。 Component is also isolated from the global styles we've defined for our application. 组件也与我们为应用程序定义的全局样式隔离。
ViewEncapsulation.None
: We are not encapsulating anything, the style we defined in our component has leaked out and started affecting the other components. ViewEncapsulation.None
:我们没有封装任何东西,我们在组件中定义的样式已经泄漏出去并开始影响其他组件。
You can make a wrapper element and give it an Id, use that ID to give styles for that particular component. 您可以制作一个wrapper元素并为其指定一个ID,使用该ID为该特定组件指定样式。 And same for the second component also.
第二部分也是如此。 So that the styles won't make conflict one after another.
这样样式就不会彼此冲突。
<div id="component1">
//Component1 code here
</div>
<div id="component2">
//Component2 code here
</div>
Styles 款式
#component1 .list-group-item {
padding: 0px;
}
#component2 .list-group-item {
padding: 10px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.