4

我正在使用 Grid List of angular material 2。

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

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

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

4

4 回答 4

6

仅适用于 div：

要将列更改仅应用于 div，elementRef请在 div 中添加一个，例如#gridView. 使用此 ref 获取width包含网格列表的 div 的。然后我们可以在宽度变化时使用[fxShow]from并根据.flex-layoutdivdiv

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

演示

完整视口：

是的，有可能flex-layout。在我的测试中，我发现fxLayoutapi 不能很好地与.md-grid-listMediaChange, ObservableMedia

编辑 Plunker，col 尺寸更改为 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;
      }
    });
}
于 2017-07-19T12:55:35.030 回答
3

另一种选择是使用Covalent 的媒体查询来更改列数。

它可能看起来像这样：

<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。

于 2017-07-20T01:30:45.823 回答
3

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

在 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();
  }
于 2018-02-16T11:43:25.210 回答
0

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

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

干杯

于 2018-05-03T22:17:55.417 回答