提问者:小点点

如何在Angular2/4中禁用第三方组件中的视图封装?


我想重写我正在使用的开源组件的样式,但是我能找到的禁用视图封装的唯一方法是在组件的装饰器上。当然,使用第三方模块意味着我不能为它编辑源代码。不然怎么做?

编辑

我知道这个/深度/风格的建议。我想做的是用bootstrap 4中的样式覆盖第三方组件中的表样式。自定义组件有一个.table类应用于它,但是使用视图封装,boostrap 4类无法访问它。

我只是想知道,是否有一种方法可以完全禁用视图封装,而不必分叉代码,并添加组件装饰器属性值“encapsulation:viewencapsulation.none”供我自己使用。


共1个答案

匿名用户

可以使用/deep/css选择器重写嵌套组件的css样式。例如,组件使用第三方组件,该组件使用“.Dropdown”类创建下拉。

组件HTML:

 <ss-multiselect-dropdown #multipleSelect
                     [settings]="settings"
                     [options]="options"
                     [(ngModel)]="selectedOptions"
                     (ngModelChange)="onSelectChange($event)"></ss-multiselect-dropdown>

下面是重写下拉类的组件的css。

/deep/ .dropdown {
  display: inline-block;
  width: 100%;
}