Angular 2 - 子组件不继承父组件的样式

Question

我有一个使用子组件的父组件。我在父 Css 文件中编写了必要的样式，当我们将鼠标悬停在 div 上时，样式会相应更改。子组件未访问父组件的样式类。

有一个解决方案可以做到这一点，使用 encapsulation: ViewEncapsulation.None ，但是当我使用它时，我的整个造型都会受到干扰。

还有其他方法吗？

Plunker 示例：http://plnkr.co/edit/gwcTi4QyZyFPtlgfY5Al?p=preview

子组件：

import {Component} from '@angular/core';
@Component({
    selector:'testapp',
    template: `
      <a href="https://www.google.com">Google</a>
    `
})
export class TestApp{   
}

父组件： 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;
}

Answer 1

将样式移动到子组件，并将类名从父组件传递给子组件。

import {Component} from '@angular/core';
@Component({
    selector:'testapp',
    template: `
      <a [ngClass]="anchorClass" href="https://www.google.com">Google</a>
    `,
    styles: [`
        a.red-green-anchor {color:red;}
        a.red-green-anchor:hover {color:green;}
        a.orange-blue-anchor {color:orange;}
        a.orange-blue-anchor:hover {color:blue;}
    `]
})
export class TestApp{
    @Input() anchorClass: string;
}

父 HTML

<div class="container">
    <div class="test">
        <testapp [anchorClass]="'red-green-anchor'"></testapp>  
    </div>
</div>

您尝试这样做的方式是将父母与孩子紧密结合，而不是让一切都自成一体。将样式移至子级可保持子级自包含，任何父母都可以决定设置哪个子 css 类以保持所有内容自包含。

working plnkr