特定于平台的样式不继承自组件样式答案

【问题标题】：platform specific styles do not inherit from component style特定于平台的样式不继承自组件样式
【发布时间】：2018-04-29 13:25:29
【问题描述】：

当平台特定的 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 上，它的行为符合预期，Labels 背景颜色为红色。在 Android 上，Labels 背景颜色完全没有变化。我期望的行为是它继承了 items.component.css 的样式，因此 Labels 的背景颜色应该是蓝色，但它不是。

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

拥有组件全局 CSS 以及从组件全局 CSS 继承的平台特定 CSS 的正确方法是什么？还是我做错了什么？

【问题讨论】：

标签： angular nativescript angular2-nativescript

【解决方案1】：

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

好吧，除非您在 css 中使用 :host ::ng-deep 选择器，在这种情况下，它们也会应用于底层子组件。但不推荐这样做，因为该功能有一天会在 Chrome 中被弃用，因此如果确实需要，您应该使用 @Input() 将样式/配置传递给底层组件。

如果您想要全局样式，您可以在全局资产文件夹中声明它们并将其作为资产包含在 angular-cli.json 中。

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

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

【讨论】：