スクリーンサイズの修飾子を設定する方法nativescriptのtypescript＆angluar2

Question

現在、typescript & angluar2を使用してnativescriptアプリケーションを開発しています。 タブレットと携帯電話のレイアウトを変更します。 しかし、typesscript &のangluar2に複数のスクリーンサイズ修飾子をサポートしていませんでした。 nativescript-platfrom-cssプラグインを使用しようとしています。

TNSはnativescriptプラットフォーム-CSS

を追加するプラグインしかし、それは私のプロジェクトでは動作しません。 私のプロジェクトには以下のようなコードがあります。 /////login.html

///directory structure/// 
... ... 
pages/login.html/ 
pages/login.component.ts/ 
pages/login.common.css/ 
... ... 

////main.ts/// 
... ... 
import nativescriptPlatfromCss = require('nativescript-platform-css'); 
... ... 

//////login.ts////////

@Component({ 
    selector: "login", 
    providers:[UserService], 
    templateUrl:"pages/login/login.html" , 
    styleUrls:["pages/login/login-common.css", "pages/login/login.css"] 
}) 

... ...

<StackLayout #container> 
    <TextField class="inputEmail" hint="Email Address"></TextField> 
... ... 
</StackLayout> 

////login.common.css

.inputEmail { 
    backgournd-color:'white'; 
} 
.android600 .inputEmail{ 
    background-color:'red'; 
} 
.android720 .inputEmail{ 
    background-color:'blue'; 
} 

... ...

私は既にhttps://www.nativescript.org/blog/supporting-multiple-screen-resolutions-in-your-nativescript-appとhttps://github.com/nathanaela/nativescript-platform-cssを見ました。

しかし、私は目標を達成できませんでした。

複数のスクリーンサイズをタイプスクリプト& angluar2 appで実装する最善の方法をご存知でしたら、お知らせください。

おかげ

Answer 1

const isTablet: boolean = device.deviceType == DeviceType.Tablet; 

@Component({ 
    styleUrls: ['default.css', (isTablet ? 'tablet.css' : 'phone.css')] 
}) 

からhttps://github.com/NativeScript/nativescript-angular/issues/404 "EddyVerbruggenコメント"。

また、プラットフォームの検出機能を含めることもできます。デバイスや幅や高さに応じてCSSを作成すると便利です。

import platformModule = require("platform"); 

console.log("Device model: " + platformModule.device.model); 
console.log("Device type: " + platformModule.device.deviceType); 
console.log("OS: " + platformModule.device.os); 
console.log("OS version: " + platformModule.device.osVersion); 
console.log("SDK Version: " + platformModule.device.sdkVersion); 

console.log("Screen width: " + platformModule.screen.mainScreen.widthPixels); 
console.log("Screen height: " + platformModule.screen.mainScreen.heightPixels); 
console.log("Screen scale: " + platformModule.screen.mainScreen.scale);