Angular 2组件标签样式化

Question

在我的app-root组件中，我有一个app-container组件。我该如何给app-container组件添加样式？

HTML:

<app-container></app-container>

CSS：

app-container {
  background: red;
}

上述CSS不起作用。

我想要样式和位置化应用程序容器组件。我试图搜索，但找不到合适的解决方案。请帮忙。

提前致谢！

- Aravind Vasudevan

---

这样做有特定的原因吗？为什么不只是将<app-container>放在<div>中并对其进行样式设置？ - Ahmed Musallam

不，我只是想知道是否有一种直接为组件标签设置样式的方法。无论如何，谢谢。 - Aravind Vasudevan

Answer 1

是的，有的。如果您已启用影子DOM或影子DOM仿真，则可以通过:host属性样式化标记。（仿真默认启用）

例如：

:host{
   background-color:red;
}

我强烈建议您阅读这篇文章：https://angular.io/guide/component-styles

如果您的CSS代码位于全局CSS文件中而不是组件CSS文件中，那么您上面的代码应该可以工作。

不要忘记检查styleUrl路径。 这是一个styleUrls的示例。

@Component({
  selector: 'hero-details',
  template: `
    <h2>{{hero.name}}</h2>
    <hero-team [hero]=hero></hero-team>
    <ng-content></ng-content>
  `,
  styleUrls: ['app/hero-details.component.css']
})
export class HeroDetailsComponent {
/* . . . */
}

这里有关于仿真/本地 -影子DOM的更多细节：https://angular.io/guide/component-styles#view-encapsulation

- DaniS

---

你救了我的命，我都快疯了！ - AndreaM16

拯救了一天，却毁掉了项目的暴行。（已点赞） - Cody

兄弟，爱你哦。运行良好。 - Co ti