NativeScript角度スクリーナのSCSSファイル

Question

スクリーンの修飾子がAngularで動作するのに失敗しました。

SCSS個のファイルをCSS個のファイルに変換するのに、nativescript-dev-sassを使用しています。

コンポーネントは、デバイスにデプロイされる前にコンパイルされます。私は、実行時に、デバイスのサイズに基づいて異なるCSSファイルを選択するために、コンポーネントTypeScriptファイルを希望

@Component({ 
    selector: 'plugin-user-login', 
    templateUrl: 'user-login.component.ns.html', 
    styleUrls: ['user-login.component.ns.css'], 
    moduleId: module.id 
}) 

：transpiledコンポーネントTypeScriptの

エキス。

styleUrlsのセレクタを作成することはできますか？

実行時に使用されるSCSSというファイルのスクリーン修飾子の解決法はありますか？

Answer 1

私の知る限り、これは在庫NativeScriptプロジェクトではサポートされていますが、NativeScript角度プロジェクトではサポートされていません。

開発スタックを調整することができる場合は、Team Maestroが開発した角度ネイティブシードを使用することをおすすめします。

https://github.com/TeamMaestro/angular-native-seed

あなたは携帯電話/タブレットのテンプレートを指定することができるように、種子に追加された追加のツールがありました。

電話機とタブレットのレイアウトよりも具体的なコントロールが必要な場合は、代わりの方法を提案します。メインのAppComponentでデバイスサイズを取得し、コンポーネントにクラスを追加することができます（つまり、.size-468、そのサイズに基づいてスタイルを設定することができます）。

ダウンサイド：要求していることを達成できません。

この問題が「なぜ」になるのが好きな人は、NativeScriptはそうではありません。実行時まで、アプリケーションを実行しているデバイスのサイズを知ることができます。Angularはテンプレートを事前にビルドしています。そのため、現在ロードするスタイルシートやテンプレートを知る方法はありません。

開示：私はAngular Native Seedの主要開発者の1人です。

Answer 2

私の同僚は私に以下の解決策を教えてくれました。

/編集styleUrlsString[]

export function switchStyleUrls(styleUrl: string): string { 

    switch (Platform.deviceSize()) { 
     case DeviceSizeE.dpi326: 
      return styleUrl.replace(".css", ".minWH326.css"); 

     case DeviceSizeE.dpi401: 
      return styleUrl.replace(".css", ".minWH401.css"); 

     case DeviceSizeE.default: 
      return styleUrl; 
    } 
} 

を交換するPlatform.deviceSize()がComponentDecoratorsstyleUrlsString[]

に switchStyleUrls機能で platformModule.screen.mainScreen.widthPixels

---

パスに基づいてDeviceSizeEを返す関数を作成します。

@Component({ 
    selector: './plugin-user-login', 
    templateUrl: './user-login.component.web.html', 
    styleUrls: [switchStyleUrls('../plugin-user.scss')], 
    moduleId: module.id 
}) 

それはstyleUrlsstring[]が、ビルド時に解決されていることを私の理解です。

私はまだこのソリューションをテストしています。