Question

当平台特定的CSS文件发挥作用时，我的样式有问题。

请参阅以下文件：

items.component.ts：

@Component({
  selector: 'ns-items',
  moduleId: module.id,
  template: `
      <Label [nsRouterLink]="['/item', item.id]" [text]="item.name"
             class="list-group-item"></Label>
  `,

  styleUrls: ['./items.component.css' ]
})
export class ItemsComponent implements OnInit {
  items: Item[];

  constructor(private itemService: ItemService) {
  }

  ngOnInit(): void {
    this.items = this.itemService.getItems();
  }
}

items.component.css：

Label {
    background-color: blue;
}

items.component.ios.css：

Label {
    background-color: red;
}

items.component.android.css为空。

在iOS上，它的行为符合预期，Label的背景颜色为红色。在Android上，Label的背景颜色根本没有变化。我期望的行为是它继承了items.component.css的样式，因此Label的背景颜色应该是蓝色，它不是。

我尝试在@import items.component.css中添加items.component.android.css但我收到Maximum call stack size exceeded错误，因为我已在组件中声明了CSS。

使用组件全局CSS的正确方法是什么，然后是从组件全局CSS继承的平台特定的CSS？或者我做错了什么？

Answer 1

什么是组件全局应该是什么意思？使用ViewEncapsulation.Emulated（默认设置）和.Native（浏览器本机方式与模拟相同，但只有少数浏览器实现了它;根本不使用！）组件中的样式仅适用于组件。

好吧，除非你在css中使用:host ::ng-deep选择器，在这种情况下它们也适用于底层子组件。但不建议这样做，因为有一天Chrome会弃用此功能，所以如果你真的需要，你应该使用@Input（）将样式/配置传递给底层组件。

如果您想要全局样式，可以在全局assets-folder中声明它们，并将它作为资源包含在angular-cli.json中。

或者您可以为一个特定组件设置ViewEncapsulation.None，其样式将泄漏到应用程序的其余部分。我不推荐这种方法，因为它混淆了应用的全局样式的来源，即使你在负责主题的核心组件中这样做。 Google的Angular-Material库也不使用ViewEncapsulation.None。

TLDR：仅使用angular-cli.json嵌入全局css文件。

平台特定样式不从组件样式

1 个答案: