我使用Angular Elements(6.0.3)创建了一个Web组件。当我在另一个网站中使用Web组件时,Web组件会覆盖父页面的样式,因为它也使用了Bootstrap。我知道有视图封装原理,但是据我所知,“本机”封装是not yet fully supported。所以现在我正在使用默认的“仿真”。
我发现,如果在样式之前添加:host ::ng-deep
,它们只会应用于Web组件本身,这很棒。但是,我在angular.json中加载的所有css和scss文件似乎也覆盖了父页面。有什么办法可以防止导入的样式文件出现这种情况?
我的样式导入angular.json:
"styles": [
"node_modules/intl-tel-input/build/css/intlTelInput.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/angular-calendar/css/angular-calendar.css",
"src/styles.scss",
"node_modules/font-awesome/css/font-awesome.min.css",
"src/assets/css/wizard.css",
"src/assets/css/calendar.css",
"src/assets/css/ng2-select.css"
]
答案 0 :(得分:1)
angular.json中的“样式”导入用于您希望在整个应用程序中全局定义的样式。要使用RecursiveASTVisitor
,您需要像这样在其组件内部链接其样式表:
ViewEncapsulation