Angular 标签破坏 CSS 样式答案

【问题标题】：Angular Tags disrupting CSS stylingsAngular 标签破坏 CSS 样式
【发布时间】：2017-03-24 08:13:49
【问题描述】：

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

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

我该怎么做才能改变这种行为？如何在视图呈现后使自定义 Html 标签消失？这将防止分层 CSS 规则被破坏。

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

【问题讨论】：

查看 DOM。编写与之匹配的 CSS。
@Quentin 请看编辑
您可以在不修改原始内容的情况下调整 css 只需为您的组件创建 css 文件并覆盖样式，每个组件 css 文件都不会将其样式泄漏给其他组件，它仅在组件中使用.

标签： html twitter-bootstrap css angular

【解决方案1】：

需要设置View Encapsulation Types，更多信息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。

【讨论】：

感谢您的回答。视图封装与仅在组件上保留样式规则有关。我真正想要的是自定义标签“”在视图被渲染后消失。这将防止分层 CSS 规则被破坏。
@omo_prodigi 检查我的编辑部分，这可能会有所帮助。

【解决方案2】：

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

希望有帮助

【讨论】：