Question

如何禁用ViewEncapsulation.None的效果？例如。我的一个组件（firstComponent）定义了一个带有一些属性的css类。有一个secondComponent使用相同的css类。我希望我的“secondComponent”使用第一个组件样式表定义的属性的不同特定值。我怎样才能做到这一点？

注意：我使用不同的值重新定义了“secondComponent”中的同一个类，保持secondComponent的viewEncapsulation默认值。它对我不起作用。

FirstComponent:
@Component({
    moduleId: module.id,
    selector: "FirstComponent",
    templateUrl: 'FirstComponent.component.html',
    styleUrls: ['FirstComponent.component.css'],
    encapsulation: ViewEncapsulation.None
})
FirstComponent.component.css

.ui-tree .ui-tree-container {
    background-color: #252525;
    color: white;
}

Second Component:
@Component({
    moduleId: module.id,
    selector: "SecondComponent",
    templateUrl: 'SecondComponent.component.html',
    styleUrls: ['SecondComponent.component.css'],
})
SecondComponent.Component.css

.ui-tree .ui-tree-container {
    background-color: white;
    color: black;
}

我在组件中创建了p-tree，它在内部使用.ui-tree-container。我希望我的secondComponent树的背景应该是白色的，而对于所有其他地方，树的背景应该保持黑色。

Answer 1

您可以将css封装在组件选择器中。

FirstComponent.component.css

FirstComponent .ui-tree .ui-tree-container {
    background-color: #252525;
    color: white;
}

SecondComponent.component.css

SecondComponent .ui-tree .ui-tree-container {
    background-color: white;
    color: black;
}

通过这种方式，它们不会影响彼此的模板。此外，您可以选择将ViewEncapsulation.None用于其中之一/两者之一。

Answer 2

您也可以对FirstComponent使用Default ViewEncapsulation，而是分别在css文件中使用:: ng-deep选择器。

SecondComponent

::ng-deep .ui-tree .ui-tree-container{
  background-color: white;
  color: black;
}

FirstComponent

::ng-deep .ui-tree .ui-tree-container{
  background-color: #252525;
  color: white;
}

Answer 3

如果你想重用CSS white只定制一些部分，你可以使用scss变量

第1步

创建具有公共属性和默认颜色的scss文件

<强> commontree.scss

$bgColor : white !default;
$color: black !default;

.ui-tree .ui-tree-container {
    background-color: $bgColor;
    color: $color;
}

第2步

在组件的scss文件中，根据需要修改变量的值并导入comon scss文件

<强> component1.scsss

$bgColor:  #252525; /* Override colors */
$color: white;
@import './commontree.scss';

<强> component2.scss

/* Use default colors */
@import './commontree.scss';

为此，您可以（并且可能应该）将视图封装保持为默认ViewEncapsulation.Emulated

Stackblitz demo

在Angular中禁用ViewEncapsulation.None的效果

3 个答案: