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。对于子组件，您可以将视图封装设置为none，这样它将继承父样式：

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

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

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

How to style child components from parent component's css file?

Answer 3

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

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

班级名称不应带点;）

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

下一步 - 父模板应为：

template: '<child></child>'

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

<parent></parent>

angular2子注释如何扩展父样式

3 个答案: