根据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

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

无论如何我并不需要它们的名字，所以只需删除名称就可以解决我的问题。如果您需要名称，我正在考虑将GUID添加到生成的OnInit（）的名称中。基本上只需要小心，您的组件中没有包含多个渲染副本的ID和名称，因为它们需要是唯一的。

Answer 2

你必须使用可观察到的客户端窗口的大小！

Here是怎么做到的！ 或者你可以开始使用flex-layout角度，我觉得这个库很有帮助。

编辑：

下面是代码为让数据观察屏幕宽度尺寸：

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