将bootstrap 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。