Angular NativeScipt에서 개별 페이지의 스타일을 지정하는 방법은 무엇입니까?

Question

Angular2와 함께 NativeScript 응용 프로그램을 만들고 있는데, 각 페이지를 고유 한 배경 이미지 등으로 다르게 스타일을 지정하고 싶습니다. 개별 component.css 파일의 'Page'요소를 대상으로 할 수는 없지만 페이지를 타겟팅 할 수 있습니다. 마스터 app.css 파일에 있습니다. 문제는 매 페이지마다 스타일을 설정한다는 것입니다. 나는 그것들을 독특하게하고 싶다.

지금 알아 낸 해킹은 각 구성 요소의 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 식료품 샘플에서이 작업을 수행합니다. 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에서) 나를 위해 일하고, 나는 보통 웹에 대한 각도에서 그렇게 수행

/deep/ Page { 
    background: #whatever; 
}