Question

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

这是掠夺者 https://plnkr.co/edit/0v9R3e4x3tThh85147x7?p=preview

这里我定义了一个包含三列的网格列表，并且有三个图块（显示在一行中，定义为三列）。

我想更改图块的布局方向，就好像屏幕尺寸在某个点缩小，然后所有图块应该在另一个下面的第一列中，以某种方式将cols参数的值更改为1。这怎么可能？是否可以使用flex-layout？

Answer 1

仅适用于div：

要仅将列更改应用于div，请向div添加elementRef，例如#gridView。使用此ref来获取包含网格列表的div的width。然后，当[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

完整视口：

是的，可以使用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;
      }
    });
}

Answer 2

另一种选择是使用Covalent's media queries更改列数。

看起来像这样：

<md-grid-list cols="_mediaService.query('gt-sm') ? 3 : 2" 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>

另外，您似乎不明白<md-grid-list works>如何处理布局。你不需要使用fxLayout。

Answer 3

依赖于（更改）mat-grid-list宽度的列数可以这样设置：

in html：

<div #theContainer>
     <mat-grid-list cols="{{columnNum}}">
            <mat-grid-tile *ngFor="let aTile of allTiles">
               ...
            </mat-grid-tile>
     </mat-grid-list>
</div>

TS中的

：

 @ViewChild('theContainer') theContainer;
 columnNum = 3; //initial count
 tileSize = 230; //one tile should have this width

 setColNum(){
    let width = this.theContainer.nativeElement.offsetWidth;
    this.columnNum = Math.trunc(width/this.tileSize);
  }

  //calculating upon loading 
  ngAfterViewInit() {
    this.setColNum();
  }

  //recalculating upon browser window resize
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.setColNum();
  }

Answer 4

要动态更新md-grid-list的列大小，我将变量放入md-cols-gt-sm和md-cols-sm，然后在我的控制器中更新它们。例如，它们看起来像

md-cols-gt-sm="{{nav.variable}}" md-cols-sm="{{nav.variable}}"

干杯

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

4 个答案: