1つのアプリケーションにアダプティブウェブデザインを実装する方法

Question

1つのコンポーネントに2つのテンプレートを入れる方法はありますか？私は、例えば、私が構築しているウェブサイトは応答性の高いウェブデザインではないということを意味していました。したがって、デスクトップビューとモバイルビューの2つのビューがあります。私は両方に同じアプリケーションを使用したいと思います。ユーザーのデバイスに基づいたコンポーネント内の2つのテンプレート（デスクトップビュー用とモバイルビュー用）を切り替えるにはどうすればよいですか？それは可能ですか？

Answer 1

最初に、初期化時に画面サイズを検出し、現在実行されているデバイスを特定する特別なフラグを設定する必要があります。

initializeRWD() { 
    if (screen.width < 1080) { 
     this.isSmallScreen = true; 
    } else { 
     this.isSmallScreen = false; 
    } 
} 

次に、私はあなたのテンプレートに<div class="desktop">と<div class="mobile">を入れて、画面サイズのショーでそれらのいずれかを依存し、例えばます：

<div class="desktop"> *ngIf="!isSmallScreen"> 
    <!-- desktop code here --> 
</div> 

<div class="mobile" *ngIf="isSmallScreen"> 
<!-- mobile code here --> 
</div>`