Angular 2样式不适用于子组件 [英] Angular 2 styling not applying to Child Component

问题描述

我试图将样式应用到子组件标记，但我无法做到这一点。

我有带锚标记的子组件。

尽管我在父组件中为锚标签设计样式，但它并未应用。什么是解决方案？

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

 < a href = https://www.google.com>谷歌< / A> 
  

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

Html代码：

 < div class =container> 
< div class =test> 
< testapp>< / testapp> 
< / div> 
< / div> 
  

Css code：

  .container {
 font-family：sans-serif; 
 font-size：18px; 
 border：1px纯黑色; 
} 
 .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; 
 
 $ / code> 




解决方案

查看封装（影子dom）。要禁用此行为，可以使用封装属性，如下所述：



 从'@ angular / core'导入{Component，ViewEncapsulation}; 
从'testapp.component.ts'导入{TestApp}; 
 @Component（{
选择器：'test-component'，
 styleUrls：['test.component.css']，
 templateUrl：'./test.component.html '，
指令：[TestApp]，
封装：ViewEncapsulation.None //< ------ 
}）
导出类TestComponent {
 
} 
  

看到这个plunkr： http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview 。

I'm trying to apply styling to a child component tag, but i can't do that.

I have child component with anchor tag.

Even though i have styling for anchor tag in the parent component, its not applying. What's the solution for it?

Working code: http://plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview

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

In the parent component i'm using the child component and applying styling for this child component.

Html code:

<div class="container">
  <div class="test">
    <testapp></testapp>
  </div>
</div>

Css code:

.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;
}

解决方案

It's because by default components have view encapsulation (shadow dom). To disable this behavior, you can leverage the encapsulation attribute, as described below:

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{

}

See this plunkr: http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview.

这篇关于Angular 2样式不适用于子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！