Angular NativeSciptで個々のページのスタイルを設定するにはどうすればよいですか？

Question

私はAngular2を使ってNativeScriptアプリケーションを構築していますが、独自の背景画像などで各ページのスタイルを変えたいのですが、個々のcomponent.cssファイルの「Page」要素をターゲットにすることはできませんが、マスターapp.cssファイルに保存してください。問題は、1ページごとにスタイルを設定することです。私はそれらをユニークにしたい。

ここでわかったハックは、各コンポーネントのngOnInit()機能内にthis.page.setInlineStyle('background-color: purple;');という文字を使用することです。

app.cssファイルの個々のルートからページをターゲットに設定する方法はありますか？

Answer 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を参照してください。

Answer 2

それは（NativeScriptに）私のために働いて、私は通常、Web用の角にそのように実行します。

/deep/ Page { 
    background: #whatever; 
}