如何在Angular 6中拥有一个没有继承css的组件

Question

我有一个使用 Angular 6 和 Bootstrap 的项目，现在，我只需要创建一个可以在移动设备中使用的响应式页面。所以，我需要在没有从项目继承的任何 css 的情况下创建这个页面/组件。我怎样才能做到这一点？一旦我创建了页面，它已经有一些标签，比如和 css 类，我只是不知道它们在哪里导入到这个组件中

Answer 1

一个选项是将 viewEncapsulation 设置为 ShadowDom

@Component({
  selector: 'app-test-comp',
  templateUrl: './test-comp.component.html',
  styleUrls: ['./test-comp.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class TestCompComponent {}

但要注意浏览器的支持。更多信息：

• https://angular.io/guide/view-encapsulation
• https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
• 如果你需要支持 IE 11，你可以在这里找到一个 polyfill：https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs
• https://caniuse.com/?search=shadow%20dom