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

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

我有带锚标签的子组件.

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

工作代码：http://plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview

<a href="https://www.Google.com">Google</a>

在父组件中,我正在使用子组件并为此子组件应用样式.

HTML代码：

<div >  <div >    <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.

总结

以上是内存溢出为你收集整理的html – Angular 2样式不适用于Child Component全部内容，希望文章能够帮你解决html – Angular 2样式不适用于Child Component所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。