如何在Angular NativeScript中设置单个页面的样式？

Question

我正在使用Angular2构建一个NativeScript应用程序，并且我希望使用独特的背景图像等对每个页面进行不同的样式设置。我无法在单个component.css文件中定位“Page”元素，但我可以将掌握app.css文件。问题是为每个页面设置样式。我希望它们是独一无二的。

我现在想到的黑客是在每个组件中使用this.page.setInlineStyle('background-color: purple;');函数中的ngOnInit()。

有没有办法简单地从app.css文件中的各个路线定位页面？

Answer 1

我首选的方法是在<Page>处理程序中获取对ngOnInit()的引用，并应用我可以在我的app.css文件中用作样式挂钩的CSS类名。例如：

// my-page.component.ts
import { Component, OnInit } from "@angular/core";
import { Page } from "ui/page";

@Component({ ... })
export class MyPage implements OnInit {
  constructor(private page: Page) {}
  ngOnInit() {
    this.page.className = "my-page";
  }
}

/* app.css */
.my-page {
  background-color: yellow;
}

如果您正在寻找一个功能齐全的解决方案，我会在NativeScript Groceries示例中执行此操作。见https://github.com/NativeScript/sample-Groceries/blob/9eb6fea66e3912878815b86aa5ce7b812e22eac5/app/groceries/groceries.component.ts#L36和https://github.com/NativeScript/sample-Groceries/blob/9eb6fea66e3912878815b86aa5ce7b812e22eac5/app/app.css#L7-L12。

Answer 2

它适用于我（在NativeScript中），我通常喜欢在Angular for web中使用它：

/deep/ Page {
  background: #whatever;
}