视图封装的禁用效果。无棱角

Question

如何禁用ViewEncapsulation的效果？没有吗？比如我的一个组件(firstComponent)用一些属性定义了一个css类。有一个secondComponent使用了相同的css类。我希望我的“secondComponent”为第一个组件样式表定义的属性使用不同的特定值。我怎样才能实现这一点？

注意：我在“secondComponent”中用不同的值重新定义了同一类，保持了dirdComponent的视图大写默认值。它不适合我。

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树容器。我希望我的第二个组件的树的背景应该是白色的，而对于所有其他地方，树的背景都应该保持黑色。

Answer 1

如果您只想通过自定义某些部分来重用CSS white，那么可以使用scss变量

步骤#1

使用通用属性和默认颜色创建scss文件

commontree.scss

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

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

第二步

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

组件1.SCSS

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

组件2.scss

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

为此，您可以(并且可能应该)将视图封装保持为默认的< code>ViewEncapsulation。仿真

Stackblitz演示

Answer 2

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

第二成分

::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封装在组件选择器中。

< code > first component . 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，无论是否使用它们中的任何一个。