我正在尝试将样式应用于子组件标记,但我不能这样做.
我有带锚标签的子组件.
即使我在父组件中为锚标签设置了样式,但它还没有应用.它有什么解决方案？
工作代码：http://plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview
<a href="https://www.google.com">Google</a>
在父组件中,我正在使用子组件并为此子组件应用样式.
<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).要禁用此行为,您可以利用封装属性,如下所述：
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{
}
看到这个plunkr：http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview.
