画面サイズに基づいてコンテンツを表示する方法の変更4

Question

大きな画面サイズでは、3列のコンテンツがあります。小さい画面サイズでは、3つのタブを持つタブコントロールにコンテンツを表示したいと考えています。

私は以下のhtmlを使用してこれを動作させています。問題は、コンポーネントにバインドされたデータを変更すると、そのコンポーネントの別のコピーが更新されないということです。したがって、画面が大きくてもデータが変更されると、画面が小さくなり、タブに正しく切り替わりますが、データは更新されたものとして表示されません。コード内の実際のデータオブジェクトは正常に更新されます。

コピーしたコンポーネントを常に同期させて表示するにはどうすればよいですか？基本的に、一方が変更された場合、他方は変更を模倣します。あるいは、画面が小さいときにタブにコンテンツを表示するという同じ目的を達成するために、異なる/より良い方法があります。あなたは、クライアントのウィンドウサイズの観察可能なを使用する必要が

<div fxHide fxShow.gt-sm > 
 
    <div> 
 
    <h3>Column 1</h3> 
 
    <custom-component1 
 
     [(data)]="data1"> 
 
    </custom-component1> 
 
    </div> 
 
    <div> 
 
    <h3>Column 2</h3> 
 
    <custom-component2 
 
     [(data)]="data2"> 
 
    </custom-component2> 
 
    </div> 
 
    <div> 
 
    <h3>Column 3</h3> 
 
    <custom-component3 
 
     [(data)]="data3"> 
 
    </custom-component3> 
 
    </div> 
 
    
 
    <mat-tab-group fxShow fxHide.gt-sm> 
 
    <mat-tab label="Column 1"> 
 
     <div> 
 
     <h3>Column 1</h3> 
 
     <custom-component1 
 
      [(data)]="data1"> 
 
     </custom-component1> 
 
     </div> 
 
    </mat-tab> 
 
    <mat-tab label="Column 2"> 
 
     <div> 
 
     <h3>Column 2</h3> 
 
     <custom-component2 
 
      [(data)]="data2"> 
 
     </custom-component2> 
 
     </div> 
 
    </mat-tab> 
 
    <mat-tab label="Column 3"> 
 
     <div> 
 
     <h3>Column 3</h3> 
 
     <custom-component3 
 
      [(data)]="data3"> 
 
     </custom-component3> 
 
     </div> 
 
    </mat-tab> 
 
    </mat-tab-group> 
 
</div>

Answer 1

を私は私の問題を解決しました。私は実際には、2つの表示タイプの間でラジオボタンとチェックボックスを同期させておくことに問題があることが分かりました。ラジオボタングループに名前がつけられていて、同じ名前の2つのグループがあるのが好きではなかったので、問題があったことが分かります。

とにかく名前を付ける必要はありませんでしたので、問題を修正した名前を削除するだけです。名前が必要な場合は、OnInit（）で生成された名前にGUIDを追加することを考えていました。基本的には、複数のレンダリングされたコピーを持つコンポーネントには、一意である必要があるため、IDと名前を持たないように注意してください。

Answer 2

！

Hereこれを行う方法です！ またはflex-layoutを角張って使うことができます。私はこのライブラリがかなり役に立ちます。

編集：ここでは

はLETデータのためのコードである画面の幅の大きさを観察：

あなた-component.component.ts

import { Component, AfterViewInit } from '@angular/core'; 
import { ObservableMedia, MediaChange } from '@angular/flex-layout'; 
import { Subscription } from 'rxjs/Rx'; 

@Component({ 
    selector: 'app-your-component', 
    templateUrl: './your-component.component.html', 
    styleUrls: ['./your-component.component.css'] 
}) 
export class YourComponentComponent implements AfterViewInit { 

    // Subscription of the observer of the screen size 
    mediaQuery$: Subscription; 

    // The active media query (xs | sm | md | lg | xl) 
    activeMediaQuery: string; 

    constructor(
     private observableMedia: ObservableMedia 
    ){} 

    ngAfterViewInit() { 

     this.mediaQuery$ = this.observableMedia.subscribe((change: MediaChange) => { 
      this.activeMediaQuery = `${change.mqAlias}`; 
      if (this.activeMediaQuery === 'xs' || this.activeMediaQuery === 'sm') { 
       // Here goes code for update data in xs or sm (small screen) 
      } else { 
       // Here goes code for update data in gt-sm (bigger screen) 
      } 
     }); 
    } 
}