Question

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

HTML：

<app-container></app-container>

CSS：

app-container {
  background: red;
}

^上面的CSS不起作用。

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

提前致谢！

Answer 1

是的。如果您启用了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

样式Angular 2组件标记

1 个答案: