样式Angular 2组件标记

时间:2017-04-25 14:37:43

标签: angular

在我的app-root组件中,我是app-container组件。我如何设置app-container组件的样式?

HTML:

<app-container></app-container>

CSS:

app-container {
  background: red;
}

^上面的CSS不起作用。

我想设置app-container组件的样式和位置。我试过谷歌搜索,但无法找到合适的解决方案。请帮助。

提前致谢!

1 个答案:

答案 0 :(得分:9)

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

E.G。

: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