样式不适用于子组件

本文介绍了样式不适用于子组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

我有带有锚标记的子组件.

即使我在父组件中具有锚标签的样式，也没有应用.有什么解决方案?

工作代码: plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=预览

<a href="www.google">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).要禁用此行为，可以利用encapsulation属性，如下所述:

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{ }

请参阅以下示例: plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview ./p>

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, it's 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.