如何在Angular中更改第三方组件的封装？
如何在Angular中更改第三方组件的封装？
提问于 2019-04-18 02:19:41
我使用的是带有本机封装的AngularElements，因此bs4组件可以在bs3项目中使用。示例：
@Component({
selector: 'app-my-button',
templateUrl: './my-button.component.html',
encapsulation: ViewEncapsulation.Native,
styles: ['@import "~bootstrap/scss/bootstrap.scss";']
})
export class MyButtonComponent {}问题是如何更改第三方组件的封装，使全局css不会影响它？给定NgbModalWindow组件。如何将其封装更改为ViewEncapsulation.Native并应用特定的样式？
回答 1
Stack Overflow用户
发布于 2019-04-18 03:59:37
如果在encapsulation设置为native的组件中使用第三方组件，则全局样式将不会应用于该第三方组件。例如，如果你在自己的组件中使用第三方组件ngb-modal-window比方说封装设置为native的app-my-own-component，全局样式将不会应用于ngb-modal-window，因为它将位于(父app-my-own-component的)影子根目录中。
@Component({
selector: 'app-my-own-component',
template: '<ngb-modal-window></ngb-modal-window>',
encapsulation: ViewEncapsulation.Native,
styles: ['@import "~bootstrap/scss/bootstrap.scss";']
})但是，在这种情况下，在app-my-own-component中添加样式将应用于ngb-modal-window。
您可以做的另一件事是在全局级别将encapsulation设置为ViewEnacpsulation.Native，这样应用程序中的所有组件都将具有本机封装。您可以在引导main.ts文件中的应用程序模块时执行此操作：
将此：platformBrowserDynamic().bootstrapModule(AppModule)更改为：
platformBrowserDynamic().bootstrapModule(AppModule, [
{
defaultEncapsulation: ViewEncapsulation.Native
}
])您必须将ViewEncapsulation导入到main.ts中，无论您要引导模块的文件名是什么。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55733764
复制相关文章
相似问题
腾讯云开发者
