how to set 'Page' level properties in angular component

Hi! i’m using angular2-seed-advanced, web + mobile with angular+nativescript, i’m trying to set my background sitting under statusbar using opaqueTokens, but somehow it don’t work. My code: Token.ts

import {OpaqueToken} from '@angular/core';
export const PAGE: OpaqueToken = new OpaqueToken('page');

App.ts

nativeScriptBootstrap(NSAppComponent, [
    provide(WindowService, {useClass: WindowNative}),
    provide(PAGE, {useClass: Page}),
    ModalNative,
    provide(HttpService, {useClass: NSHttpService}),
    provide(TranslateLoader, {
        useFactory: () => {
            return new TNSTranslateLoader('assets/i18n');
        }
    }),
    NS_APP_PROVIDERS,
    nsProvideRouter(routes, {enableTracing: false})
]);

myComponent.ts

constructor(@Inject (PAGE) private page:PAGE) {
        if (CoreConfigService.IS_MOBILE_NATIVE) {
            console.log(this.page.ios);
            this.page.actionBarHidden = true;
            this.page.backgroundSpanUnderStatusBar=true;
            this.page.backgroundImage = this.page.ios ? "res://bg_login.jpg" : "res://bg_login";
        }
    }

[NathanWalker]

Just to conclude, turns out his issue was related to fact that when using an OpaqueToken to build a web/{N} shared codebase, one must provide the PAGE OpaqueToken in the correct way, for instance this works:

// somewhere in web codebase
import {OpaqueToken} from '@angular/core';
export const PAGE: any = new OpaqueToken('page');
...

// then only in the {N} app
nativeScriptBootstrap(AppComponent, [
    provide(PAGE, {
        useFactory: () => {
            const frame = topmost();
            if (frame) {
                return frame.currentPage;
            } else {
                return null;
            }
        }
    })
]);

... then in a component which is used on the web (as well as in {N} app), one can do this:

@Component({
    selector: 'any-cmp',
    templateUrl: 'any.component.html'
})
export class AnyComponent {

    constructor(@Inject(PAGE) private page:any) {
        if (Config.IS_MOBILE_NATIVE()) {
            this.page.actionBarHidden = true;
            this.page.backgroundSpanUnderStatusBar = true;
            this.page.backgroundImage = 'res://bg_login';
        }
    }

Works wonderfully and ensures that it doesn’t break the web 👍

[armackey]

@NathanWalker This method looks good but I haven’t been able to get this to work. Is provide a class I should import or create? Or has the standard changed?