Question

我有一个使用Angular 2框架构建的项目。自定义角度标记（<my-app>，<my-whatever-component>等）会不断中断css输出。当HTML直接在index.html文件上（不在任何组件中）时，CSS加载正常。

我已经调试并得出了一定的结论，即自定义角度标签是问题的原因。

我该怎么做才能改变这种行为？在呈现视图后，如何使自定义Html标记消失？这将阻止分层CSS规则中断。

编辑1：我忘了提到CSS是自定义的（免费的bootstrap管理模板），所以我不能（更像是我不想）调整它。

Answer 1

您需要设置视图封装类型，更多信息here

@Component({
   moduleId: module.id,
   selector: 'my-zippy',
   templateUrl: 'my-zippy.component.html',
   styles: [`
    .zippy {
      background: green;
    }
   `],
   encapsulation: ViewEncapsulation.None //No Shadow DOM at all. Therefore, also no style encapsulation.
})

修改

作为一种解决方法，您可以在组件中使用属性选择器，如

selector: '[my-component]'

然后像
一样使用它
<div my-component>Hello My component</div>

这样，您可以跳过HTML中的组件标记，并可以应用分层css。

Answer 2

你能通过笨蛋或类似的方式举例吗？您使用的是twitter bootstrap bootstrap.js还是UI Bootstrap？如果您只是使用直接的twitter引导程序，那么使用javascript中实现的任何引导程序组件时都会遇到问题。

希望有所帮助

Angular标签破坏了CSS样式

2 个答案: