如何在angular2/4中禁用第三方组件中的视图封装?
问题描述:
我想覆盖我正在使用的开源组件的样式,但是我可以找到禁用视图封装的唯一方法是在组件的装饰器上。当然,使用第三方模块意味着我无法编辑它的源代码。该怎么办呢?如何在angular2/4中禁用第三方组件中的视图封装?
编辑
我了解/深/风格建议。我想要做的是用引导程序4中的样式来覆盖第三方组件中的表格样式。自定义组件具有应用于它的.table类,但是对于视图封装,它由boostrap 4类无法访问。
我只想知道是否有一种方法来完全禁用视图封装,而不必分叉代码并为我自己的用途添加组件装饰器属性值“encapsulation:ViewEncapsulation.None”。
答
您可以使用/ 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%;
}
是的。好的建议有很多目的,但我的情况有点不同。看我的编辑。 –
platformBrowserDynamic()。bootstrapModule(AppModule,{defaultEncapsulation:ViewEncapsulation.None}); –
更新:/ deep /现在已被弃用。所以也许需要一个不同的解决方案 – pravin