我正在尝试将样式应用于子组件标签,但是我不能这样做。
我有带有锚标记的子组件。
即使我在父组件中具有锚标签的样式,也没有应用。有什么解决方案?
工作代码:http://plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p = preview
<a href="https://www.google.com">Google</a>
在父组件中,我正在使用子组件,并为此子组件应用样式。
HTML代码:
<div class="container">
<div class="test">
<testapp></testapp>
</div>
</div>
CSS代码:
.container{
font-family:sans-serif;
font-size:18px;
border: 1px solid black;
}
.test{
width:50%;
background-color:#f0f5f5;
}
.container:hover .test{
background-color:#e6ffe6;
}
.container:hover .test:hover{
background-color:#ffffe6;
}
.container .test a {
color: red ;
}
.container .test a:hover {
color:green;
}
这是因为默认情况下组件具有视图封装(影子dom)。要禁用此行为,可以利用该encapsulation
属性,如下所述:
import {Component, ViewEncapsulation} from '@angular/core';
import {TestApp} from 'testapp.component.ts';
@Component({
selector:'test-component',
styleUrls: ['test.component.css'],
templateUrl: './test.component.html',
directives:[TestApp],
encapsulation: ViewEncapsulation.None // <------
})
export class TestComponent{
}
请参阅以下代码:http ://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview 。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句