mobile - デバイスに基づいてテンプレートを選択する方法はangular2にありますか

Question

angular2 のビュー用にデバイス テンプレートごとに 1 つ、一部のビューではすべてのデバイス用に 1 つのテンプレートが必要です。ブラウザのユーザーエージェントに基づいてangular2で可能ですか

Answer 1

これには、メディア クエリで CSS @imports を使用できます。

デバイスごとに個別の CSS ファイルを作成し、それをテンプレート スタイルにインポートするだけです。

例：

Angular2 コンポーネント:

@Component({
  selector: 'my-comp',
  template: `...`,
  styleUrls: ['./style.css']
})

でstyle.css：

@import url("device1.css") screen and (min-width: 300px);
@import url("device2.css") screen and (min-width: 800px);

そして、device1.css と device2.css のデバイス固有のスタイル。

CSS @imports の詳細については、https: //developer.mozilla.org/en/docs/Web/CSS/@import を参照してください。