Ändern, wie Inhalt angezeigt wird basierend auf der Bildschirmgröße in Angular 4

Question

Auf einer größeren Bildschirmgröße habe ich 3 Spalten Inhalt. Auf einer kleineren Bildschirmgröße möchte ich den Inhalt in einem Tab-Steuerelement mit 3 Tabs anzeigen.

Ich habe dies funktioniert mit dem HTML unten. Das Problem ist, dass, wenn ich Änderungen an den Daten mache, an die eine Komponente gebunden ist, die andere Kopie der Komponente nicht aktualisiere. Wenn also Daten geändert werden, während der Bildschirm groß ist, wird der Bildschirm verkleinert, er wechselt zu den Registerkarten, aber die Daten werden nicht als aktualisiert angezeigt. Das eigentliche Datenobjekt im Code wird aktualisiert.

Wie kann ich die kopierten Komponenten synchronisieren, um immer dieselben anzuzeigen? Grundsätzlich, wenn man sich verändert, ahmt der andere diese Änderungen nach. Oder gibt es einen anderen/besseren Weg, um das gleiche Ziel zu erreichen, Inhalte in Tabs anzuzeigen, wenn der Bildschirm klein ist.

<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

ich mein Problem gelöst. Ich fand heraus, dass ich wirklich nur Probleme hatte, Radio-Buttons und Check-Boxen synchron zwischen den beiden Display-Typen zu halten. Es stellte sich heraus, dass es Probleme gab, weil die Radio-Button-Gruppen benannt wurden und es nicht so war, dass es zwei Gruppen mit dem gleichen Namen gab.

Ich brauchte sie nicht benannt zu werden, also löste einfach das Entfernen der Namen mein Problem. Wenn Sie Namen brauchen, dachte ich darüber nach, dem Namen, der OnInit() generiert wird, eine GUID hinzuzufügen. Achten Sie grundsätzlich darauf, dass Sie in Ihren Komponenten, die mehrere gerenderte Kopien haben, keine IDs und Namen haben, da sie eindeutig sein müssen.

Answer 2

Sie haben eine beobachtbare der Client-Fenster Größe zu verwenden!

Here ist, wie es geht! Oder Sie können anfangen zu verwenden flex-layout für eckig, finde ich diese Bibliothek ziemlich hilfreich.

EDIT:

Hier ist der Code für vermietete Daten die Bildschirmbreite Größe beachten:

your-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) 
      } 
     }); 
    } 
}