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

要仅将列更改应用于div,请将div添加到div,例如#gridView.使用此ref来获取包含grid-list的div的宽度.然后我们可以在div宽度改变时使用flex-layout中的[fxShow],并根据div的大小设置col编号.

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

完整视口：

是的,可以使用flex-layout.在我的测试中,我发现fxLayout api与md-grid-list不兼容,所以作为替代方案,我使用它的MediaChange,ObservableMedia功能来检测屏幕大小并根据它设置列号.

Edited Plunker,对于屏幕尺寸sm和xs,col尺寸更改为2和1.

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>

component.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;
      }
    });
}