我试图将样式应用到子组件标记，但我无法做到这一点。
我有带锚标记的子组件。
尽管我在父组件中为锚标签设计样式，但它并未应用。什么是解决方案？
工作代码： plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview
< a href = www.google>谷歌< / 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}; 从'testappponent.ts'导入{TestApp}; @Component（{选择器：'test-component'， styleUrls：['testponent.css']， templateUrl：'./testponent.html '，指令：[TestApp]，封装：ViewEncapsulation.None //< ------ }）导出类TestComponent { }看到这个plunkr： 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: plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview
<a href="www.google">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 'testappponent.ts'; @Component({ selector:'test-component', styleUrls: ['testponent.css'], templateUrl: './testponent.html', directives:[TestApp], encapsulation: ViewEncapsulation.None // <------ }) export class TestComponent{ }See this plunkr: plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview.
更多推荐
Angular 2样式不适用于子组件
发布评论