0

Angular2 を使用して NativeScript アプリを構築しており、各ページを独自の背景画像などで異なるスタイルにしたいと考えています。個々の component.css ファイルで「ページ」要素をターゲットにすることはできませんが、マスターapp.cssファイル。問題は、すべてのページにスタイルを設定することです。私はそれらがユニークであることを望みます。

私が今考え出したハックは、各コンポーネントの関数this.page.setInlineStyle('background-color: purple;');内で使用することです。ngOnInit()

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

4

2 に答える 2

3

私が好むアプローチは<Page>、ハンドラーで への参照を取得し、ファイル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 サンプルでこれを行います。https://github.com/NativeScript/sample-Groceries/blob/9eb6fea66e3912878815b86aa5ce7b812e22eac5/app/groceries/groceries.component.ts#L36およびhttps://github.com/NativeScript/sample-Groceries/blob/9eb6fea66e3912878815b86aa25ac1appac1b86aa25ce _ /app.css#L7-L12 .

于 2016-08-22T13:22:44.810 に答える