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

【问题标题】：How to style individual pages in Angular NativeScript?如何在 Angular NativeScript 中设置单个页面的样式？
【发布时间】：2016-08-20 10:58:02
【问题描述】：

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

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

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

【问题讨论】：

您可以为每个页面添加单独的 css 文件，您可以在其中添加其独特的样式。
@HardikVaghani 问题是不能从单个组件 CSS 文件中定位 Page 元素。它在 DOM 树中更高。
您是否尝试过为每个页面设置根布局的样式？比如说，给你的 StackLayout 一个“页面”类，然后让它的 css 样式占据整个页面，然后按照@HardikVaghani 的建议为其定义背景？
仅供参考，NativeScript 中没有 DOM，您的意思是 UI 树
@VladimirAmiorkov 是的，“UI 树”是我正在寻找的词。

标签： nativescript angular2-nativescript

【解决方案1】：

我的首选方法是在ngOnInit() 处理程序中获取对<Page> 的引用，并应用我可以在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。

【讨论】：

【解决方案2】：

它对我有用（在 NativeScript 中），我通常在 Angular for web 中这样做：

/deep/ Page {
  background: #whatever;
}

【讨论】：