Question

我正在试图弄清楚如何在home.component.css中编写CSS，但它无法正常工作。

我试过

p0[1]

以及

:host-context(body) 
  { 
    background-color: #eee; 
  }

但无效。

我可能做错了什么？

Answer 1

您可以在组件视图之外使用:host或:host-context来设置样式元素。您需要使用ViewEncapsulation.None。

如果您希望body仅在加载home组件的路径时具有某些背景，那么您可以执行以下操作。您可以使用ViewEncapsulation.None创建一个包装器组件，该组件将home.component置于内部，以便HomeComponent的样式仍然封装在HomeComponent内。

@Component({
   encapsulation: ViewEncapsulation.None,
   template: `<home-component>...`,
   styles: [`body { background-color: #eee; }...`]
})
export class WrapperComponent {}

routes = [
   {
       path: 'home',
       component: WrapperComponent

Answer 2

使用ViewEncapsulation.None可能会导致大量css冲突，尤其是如果两个组件具有相同的class并且彼此嵌套。（相信我，我一直在那里。）试试这个适用于我的解决方案。

// NO spaces between `>>>`. I.E. IntelliJ auto format with spaces
:host() >>> body 
  { 
    background-color: #eee;
  }

您需要>>>强制组件使用父组件提供的css而不是其自己的css文件样式。

Answer 3

这对我有用：

:host-context(body)
{
  background-color: darkred;
  height: 100%;
  width: 100%;
  display: block;
}

必须进行块显示。仅适用于一个组件

：主机（正文）无法在Angular中工作

3 个答案: