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

Question

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

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

有没有一种方法可以简单地从 app.css 文件的各个路径定位页面？

Answer 1

我的首选方法是在 ngOnInit() 处理程序中获取对 <Page> 的引用，并应用我可以用作的 CSS class 名称我的 app.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 and https://github.com/NativeScript/sample-Groceries/blob/9eb6fea66e3912878815b86aa5ce7b812e22eac5/app/app.css#L7-L12。

Answer 2

它对我有用（在 NativeScript 中），我通常在 Angular 网络版中喜欢它：

/deep/ Page {
  background: #whatever;
}

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

How to style individual pages in Angular NativeScript?

nativescript

angular2-nativescript