angular - 根据屏幕大小更改 md-grid-list 的布局或 cols 值

Question

我正在使用 angular material 2 的网格列表.

这是plunker
https://plnkr.co/edit/0v9R3e4x3tThh85147x7?p=preview

在这里，我定义了一个三列的网格列表，并且有三个图 block (在一行中显示为定义为三列)。

我想更改图 block 的布局方向，例如如果屏幕尺寸在某个点缩小，那么所有图 block 都应该在另一列下方的第一列中，这在某种程度上是 cols 的值参数改为1。怎么可能？是否可以使用 flex-layout ？

Answer 1

仅适用于 div:
要将列更改仅应用于 div，请添加 elementRef以 div 为例，#gridView .使用此 ref 获取 width包含网格列表的 div。然后我们可以使用[fxShow]来自 flex-layout当div宽度改变并根据 div 的大小设置列号.
html:

<div style="background: skyblue" #gridView [ngStyle]="{ 'width.px': divSize }"
    [fxShow]="setColNum(gridView.style.width)">
    <md-grid-list [cols]="columnNum" rowHeight="100px">
        <md-grid-tile>
            A
        </md-grid-tile>

        <md-grid-tile>
            B
        </md-grid-tile>

        <md-grid-tile>
            C
        </md-grid-tile>
    </md-grid-list>
</div>

ts:

@ViewChild('gridView') gridView;
      
columnNum = 3;

divSize = 900;

setColNum(div){
  // console.log(div);
  if(this.gridView.nativeElement.offsetWidth < 400){
    this.columnNum = 1;
  }
  if(this.gridView.nativeElement.offsetWidth >= 400 
      && this.gridView.nativeElement.offsetWidth < 800){
    this.columnNum = 2;
  }
  if(this.gridView.nativeElement.offsetWidth >= 800){
    this.columnNum = 3;
  }
}

demo
完整视口(viewport):
是的， flex-layout 是可能的.在我的测试中，我发现 fxLayout api 不能很好地与 md-grid-list 配合使用，所以作为替代方案，我使用了 MediaChange, ObservableMedia检测屏幕尺寸并基于此设置列号的功能。
Edited Plunker , col size 更改为 2 和 1 用于屏幕尺寸 sm和 xs .
html:

<md-grid-list [cols]="columnNum" 
              rowHeight="100px">
  <md-grid-tile>
    A
  </md-grid-tile>
  
  <md-grid-tile>
    B
  </md-grid-tile>
  
  <md-grid-tile>
    C
  </md-grid-tile>
</md-grid-list>

组件.ts:

columnNum = 0;

constructor(media: ObservableMedia) {
  media.asObservable()
    .subscribe((change: MediaChange) => {
      // alert(change.mqAlias);  
      console.log(change.mqAlias);
      if(change.mqAlias == 'xs'){
        this.columnNum = 1;
      }
      else if(change.mqAlias == 'sm'){
        this.columnNum = 2;
      }
      else{
        this.columnNum = 3;
      }
    });
}