異なるビューを持つ1つのコンポーネント

Question

私はデスクトップデバイス用に1つのビューを持ち、モバイルデバイス用にもう1つのビューを持ちたいと思っています。ユーザーのデバイスがモバイルデバイスであるかデスクトップデバイスであるかを示すサービスにフラグを設定します。両方のビューで状態とロジックは同じです。デスクトップビューではデータを表に表示し、モバイルビューではデータをブロックで表示する必要があります。

この動作を実装する最も良い方法は何ですか？

Answer 1

あなたがデバイスについて知らせるフラグを持っている場合、そのフラグを他のデータとともにコンポーネントに送信し、コンポーネントファイルからそのフラグをテンプレートファイルに送信して条件付きにすることができますその中の構造。

Answer 2

あなたはこの方法であなたのテンプレートで*ngIf directiveを使用することができます。

YOUT-componant.componant.html（テンプレート）：あなたの電流経路上に行くことができる@Udi

<div *ngIf="desktopUser"> 
    // whatever your html is for desktop user 
</div 
<div *ngIf"!desktopUser"> 
    // whatever your html is for other device 
</div> 

Answer 3

（ここで他の答えがオプションに対応している場合）、またはより良い方法として、Flexレイアウトを活用して、不必要なコードや構造ディレクティブを必要とせずに動的な応答性の高いテンプレートを作成し、維持する複数のビューを作成できます。

私は@ angular/flex-layoutのファンです。ここにあなたへのリンクがいくつか用意されています（新しいものであれば）、または角度/フレックスレイアウトのgithubレポにダイビングしてコーディングを開始することができます。

素晴らしい詳細をFlexに紹介します。 https://medium.freecodecamp.org/even-more-about-how-flexbox-works-explained-in-big-colorful-animated-gifs-a5a74812b053

早見：運のベスト https://css-tricks.com/snippets/css/a-guide-to-flexbox/

の角/フレックスレイアウトgithubのページ/レポ@ https://github.com/angular/flex-layout/wiki/Live-Demos

！