样式化 Angular 2 组件标签 [英] Styling Angular 2 component tag

问题描述

在我的 app-root 组件中，我有 app-container 组件.我将如何设置应用容器组件的样式?

Inside my app-root component, I've app-container component. How would I style the app-container component?

HTML:

<app-container></app-container>

CSS:

app-container {
  background: red;
}

^ 上面的 css 不起作用.

^ The above css doesn't work.

我想设计和定位 app-container 组件.我尝试谷歌搜索，但找不到合适的解决方案.请帮忙.

I want to style and position the app-container component. I tried googling but couldn't find a proper solution. Please Help.

提前致谢！

推荐答案

是的.如果您启用了 shadow-dom 或 shadow-dom 的模拟，您可以通过 :host 属性设置标签的样式.(默认情况下启用仿真)

Yes there is. If you have enabled shadow-dom or the emulation of shadow-dom you can style the tag via the :host property. (Emulation is enabled per default)

E.G.

:host{
   background-color:red;
}

我强烈推荐你这篇文章:https://angular.io/guide/component-styles

I highly suggest you this article: https://angular.io/guide/component-styles

如果上面的 css 代码在全局 css 文件中而不是在组件 css 文件中，那么它应该可以工作.

Your css code above should work if it is in the global css file not in the component css file.

不要忘记检查 styleUrl 路径.这里有一个 styleUrls 的例子.

Don't forget to check the styleUrl path. Here an example of 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

Here more details on emulated / native -shadow dom: https://angular.io/guide/component-styles#view-encapsulation

这篇关于样式化 Angular 2 组件标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！