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

我正在用Angular2创建一个NativeScript应用程序，而且我想用不同的独特背景图像等对每个页面进行样式设置。我无法在各个component.css文件中定位“Page”元素，但是我可以将页面在主文件app.css中。问题在于为每个页面设置样式。我希望他们是独一无二的。如何在Angular NativeScipt中设置单个页面的样式？

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

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

来源

2016-08-20 Colin Skow

还可以增加个人的CSS文件的每个页面，您可以添加以其独特的风格。 –

@HardikVaghani问题是无法从各个组件CSS文件定位Page元素。它在DOM树中较高。 –

您是否尝试过为每个页面设计样式的根布局？比方说，给你的StackLayout一类“页面”，然后用CSS样式来占据整个页面，然后为@HardikVaghani提供的背景定义它的背景？ – scottmgerstl

我的首选方法是在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。

来源

2016-08-22 13:22:44

它的工作对我来说（在NativeScript），我通常不喜欢在角为网络：

/deep/ Page { 
    background: #whatever; 
}

来源

2017-07-29 16:03:05 Donovant

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

回答

相关问题