Angular2 子注释如何扩展父样式

Question

我有两个组件，我希望内部组件扩展到外部组件样式

@Component({
    selector: 'parent',
    style: [ '.panel{width:100px;height:100px;border:1px solid #ccc}' ],
    template: 'parent'
})
class ParentComponent 
{
}
@Component({
    selector: 'child',
    template: '<div class=".panel"></div>'
})
class ChildComponent 
{
}

像这样使用我想显示一个正方形

<parent>
    <child></child>
</parent>

Answer 1

查看 ViewEncapsulation on for 您的子组件。您可以将子组件的视图封装设置为 none，以便它将继承父样式：

import {ViewEncapsulation} from "@angular/core"
@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'child',
    template: '<div class=".panel"></div>'
}) 

我从未真正针对此用例对其进行过测试，但您可以使用它做一些事情。

Answer 2

您可以使用选择

器从父组件中提供子组件>>>如下所示，

@Component({
    selector: 'parent',
    style: [ `
           :host >>> child .myCssclass
             {
               width:100px;height:100px;border:1px solid #ccc
             } 
           `],
    template: 'parent'
})
class ParentComponent 
{
}
@Component({
    selector: 'child',
    template: '<div class="myCssclass"></div>'
})
class ChildComponent 
{
}

如何从父组件的 css 文件设置子组件的样式？

Answer 3

子组件的模板应如下所示：

template: '<div class="panel"></div>'

类名应不带点;)

无论如何，这不是角度问题。它属于CSS。

接下来 - 父级的模板应该是：

template: '<child></child>'

在最终的模板代码中，您可以只留下

<parent></parent>