在 Angular 4 中根据屏幕大小更改内容的显示方式

Question

在更大的屏幕上，我有 3 列内容。在较小的屏幕尺寸上，我想在具有 3 个选项卡的选项卡控件中显示内容。

我使用下面的 html 进行了这项工作。问题是，如果我对组件绑定的数据进行更改，它不会更新组件的其他副本。因此，如果在大屏幕时更改数据，则屏幕变小，它会正确切换到选项卡，但数据不会显示为已更新。代码中的实际数据对象更新正常。

如何同步复制的组件以始终显示相同的内容？基本上，当一个发生变化时，另一个会模仿这些变化。或者，是否有一种 different/better 方法可以实现在屏幕较小时在选项卡中显示内容的相同目标。

<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

您必须使用客户端 window 大小的可观察对象！

Here是怎么做到的！或者你可以开始使用 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)
      }
    });
  }
}

Answer 2

我解决了我的问题。我发现我真的只是在保持两种显示类型之间的单选按钮和复选框同步方面遇到了问题。事实证明存在问题，因为单选按钮组已命名，并且不喜欢有两个同名的组。

反正我不需要为它们命名，所以只需删除名称即可解决我的问题。如果您需要名称，我正在考虑向 OnInit() 生成的名称添加一个 GUID。基本上，请注意不要在具有多个渲染副本的组件中使用 ID 和名称，因为它们需要是唯一的。

在 Angular 4 中根据屏幕大小更改内容的显示方式

Change how content is displayed based on screen size in Angular 4

html

angular

size

screen

display