将引导 CSS 隔离到一个角度组件？

Question

是否可以将 Bootstrap 的 css 文件隔离到一个 Angular 组件中？

当在styles.css 或.angular-cli.json 中全局包含文件时，全局样式会导致其他不应使用引导程序的组件出现问题。我试图通过从组件的 CSS 文件中导入它来做到这一点，但样式似乎无法正确呈现......

我正在使用 Angular 5 和 Angular Cli 1.7.2。

Answer 1

您可以使用封装属性显式设置封装策略。根据您的情况将其设置为ViewEncapsulation.Native

@Component({
// ...
encapsulation: ViewEncapsulation.Native,
styles: [
  // ...
]
})
export class HelloComponent {
// ...
}

Native - 来自主 HTML 的样式不会传播到组件。此组件的 @Component 装饰器中定义的样式仅适用于此组件。 请参考此View Encapsulation。