在Angular 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

您必须使用客户端窗口大小的observable!

这是怎么做的!或者你可以开始使用flex-layout for angular,我发现这个库非常有用.

编辑:

以下是让数据观察屏幕宽度大小的代码:

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