Modifier le mode d'affichage du contenu en fonction de la taille de l'écran dans Angular 4

Question

Sur une plus grande taille d'écran, j'ai 3 colonnes de contenu. Sur une plus petite taille d'écran je veux afficher le contenu dans un contrôle de tabulation avec 3 onglets.

Je l'ai en utilisant le html ci-dessous. Le problème est que si j'apporte des modifications aux données un composant est lié à il ne met pas à jour l'autre copie du composant. Donc, si les données sont modifiées alors que l'écran est grand, alors l'écran est petit, il passe correctement aux onglets, mais les données ne s'affichent pas comme mises à jour. L'objet de données réel dans le code est mis à jour correctement.

Comment puis-je synchroniser les composants copiés pour toujours les afficher? Fondamentalement, quand l'un est changé, l'autre imite ces changements. Sinon, existe-t-il un moyen différent/meilleur d'atteindre le même objectif d'affichage du contenu dans les onglets lorsque l'écran est petit.

<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

Je résolu mon problème. J'ai constaté que je n'avais vraiment que des problèmes de synchronisation des boutons radio et des cases à cocher entre les deux types d'affichage. Il s'est avéré qu'il y avait des problèmes parce que les groupes de boutons radio ont été nommés et il n'a pas aimé qu'il y avait deux groupes avec le même nom.

Je n'avais pas besoin d'être nommé de toute façon, donc simplement supprimer les noms a résolu mon problème. Si vous avez besoin de noms, je pensais ajouter un GUID au nom qui est généré OnInit(). Fondamentalement, assurez-vous de ne pas avoir d'identifiants et de noms dans vos composants qui ont plusieurs copies rendues car elles doivent être uniques.

Answer 2

Vous devez utiliser une observable de la taille de la fenêtre du client!

Here est comment le faire! Ou vous pouvez commencer à utiliser flex-layout pour angulaire, je trouve cette bibliothèque très utile.

EDIT:

Voici le code pour les données permettent d'observer la taille de la largeur de l'écran:

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