html – Angular 2样式不适用于Child Component

发布时间：2020-12-14 21:16:49 所属栏目：资源来源：网络整理

导读：我正在尝试将样式应用于子组件标记,但我不能这样做. 我有带锚标签的子组件. 即使我在父组件中为锚标签设置了样式,但它还没有应用.它有什么解决方案？工作代码：http://plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview a href="https://www.google.com"Google

我正在尝试将样式应用于子组件标记,但我不能这样做.

我有带锚标签的子组件.

即使我在父组件中为锚标签设置了样式,但它还没有应用.它有什么解决方案？

工作代码：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).要禁用此行为,您可以利用封装属性,如下所述：

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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!