样式化 Angular 2 组件标签答案

【问题标题】：Styling Angular 2 component tag样式化 Angular 2 组件标签
【发布时间】：2017-09-22 15:33:25
【问题描述】：

在我的 app-root 组件中，我有 app-container 组件。如何设置 app-container 组件的样式？

HTML：

<app-container></app-container>

CSS：

app-container {
  background: red;
}

^ 上面的 css 不起作用。

我想设置应用容器组件的样式和位置。我尝试使用谷歌搜索，但找不到合适的解决方案。请帮忙。

提前致谢！

【问题讨论】：

这有什么具体原因吗？为什么不将包含在
中并设置样式？
不，只是想知道有没有办法直接设置组件标签的样式。还是谢谢。

【解决方案1】：

是的，有。如果您启用了 shadow-dom 或 shadow-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 {
/* . . . */
}

这里有更多关于模拟/原生 -shadow dom 的详细信息： https://angular.io/guide/component-styles#view-encapsulation

【讨论】：

你救了我的命，我快疯了！
挽救了局面并扼杀了项目的暴行。（赞成）