angular - 样式 html，来自 Web 组件的正文(Angular 2)

Question

我正在 Angular 2 中开发一个 LoginComponent，它应该“重新设计”html 和 body 标签，这样我就可以放入特定于登录页面的背景图像。

但只是在我的 login.css 中为 html, body 添加样式似乎不起作用。

有没有办法从组件中覆盖 html, body 的样式？或者与此相关的任何元素。

我试过这样的事情:

:host(.btn) { ... }
:host(.btn:host) { ... }
.btn:host { ... }

从 Login 组件外部设置元素样式。但似乎没有任何效果。

Answer 1

您需要使用 ViewEncapsulation 更改组件提供 css 的方式.默认情况下，它设置为 Emulated 并且 angular 将

add an attribute containing surrogate id and pre-process the style rules

要更改此行为从“angular2/core”导入 ViewEncapsulation 并在组件的元数据中使用它:

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
  ...
})