我使用 Angular Elements (6.0.3) 创建了一个网络组件。当我在另一个网站中使用 Web 组件时,Web 组件会覆盖父页面的样式,因为它也使用 Bootstrap。我知道有 View 封装原理,但据我所知“Native”封装是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"
]
最佳答案
angular.json 中的“样式”导入用于您希望为整个应用程序全局定义的样式。要使用 ViewEncapsulation
,您需要将它们的样式表链接到它们的组件内部,如下所示:
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
})
关于css - 防止 CSS 覆盖父页面中的 Web 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51104564/