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

子组件的模板应该是这样的：

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

class 名称应该没有点 ;)

无论如何，这不是 Angular 的问题。它属于 CSS.

下一步 - 父模板应该是：

template: '<child></child>'

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

<parent></parent>

Answer 2

您可以使用 >>> 选择器从父组件提供子组件的 css，如下所示，

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

Answer 3

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

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

我从来没有真正针对这个用例测试过它，但你可以用它做一些事情。

angular2 子注释如何扩展父样式

angular2 child comment how to extends parent styles

styles

angular