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

如何在Angular NativeScript中设置单个页面的样式?,nativescript,angular2-nativescript,Nativescript,Angular2 Nativescript,我正在用Angular2和构建一个NativeScript应用程序,我想用一个唯一的背景图像等对每个页面进行不同的样式设置。我不能在单个component.css文件中定位“Page”元素,但我可以在masterapp.css文件中定位页面。问题是设置每个页面的样式。我希望它们是独一无二的 我现在发现的方法是使用this.page.setInlineStyle('background-color:purple;') 有没有一种方法可以简单地从app.css文件中定位各个路由的页面?我首选的方法是

我正在用Angular2和构建一个NativeScript应用程序,我想用一个唯一的背景图像等对每个页面进行不同的样式设置。我不能在单个component.css文件中定位“Page”元素,但我可以在master
app.css
文件中定位页面。问题是设置每个页面的样式。我希望它们是独一无二的

我现在发现的方法是使用
this.page.setInlineStyle('background-color:purple;')ngOnInit()
函数内部的code>


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

我首选的方法是在
ngOnInit()
处理程序中获取对
的引用,并应用css类名,我可以将其用作
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示例中这样做。请参阅和。

我的首选方法是在
ngOnInit()
处理程序中获取对
的引用,并应用CSS类名,我可以将其用作
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示例中这样做。请参见和。

它对我有用(在NativeScript中),我通常喜欢在Angular for web中这样做:

/deep/ Page {
  background: #whatever;
}
它对我很有用(在NativeScript中),我通常喜欢在Angular for web中这样做:

/deep/ Page {
  background: #whatever;
}

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