javascript - 首次加载组件时更改 mat-grid-list 中的列数

Question

我正在实现图像的矩阵网格列表，并且我正在根据屏幕大小动态更改列数。这很好用，除了当它第一次加载时它被设置为 3 列而不管屏幕大小，直到事件发生。因此，如果您导航到不同的组件并返回，您将再次看到 3 列。我尝试向构造函数或其他生命周期 Hook 添加一些代码但没有成功，但这可能只是我没有正确实现它。在 typescript 文件中，对象的产品数组、构造函数和 ngOnInit() Hook 不相关。第一张图片是它加载时的样子，因为它默认为 3，第二张图片是当我单击某些内容或调整屏幕大小时的样子，第二张图片是它应该的样子。您会注意到，在 typescript 文件中，我将默认行数设置为 3，但如果删除它，则会出现错误。也欢迎对设计提出任何反馈意见。

 <!-- html -->
<div #gridView>
    <mat-grid-list cols="{{columnNum}}" gutterSize="5rem" rowHeight="25rem">
        <mat-grid-tile *ngFor="let product of products">
            <img src="{{ product.image }}" alt="">
        </mat-grid-tile>
    </mat-grid-list>
</div>

typescript 文件

import { AfterViewInit, Component, HostListener, OnInit, ViewChild } from '@angular/core';
import { ProductsService } from '../services/products.service';

@Component({
  selector: 'app-gallery',
  templateUrl: './gallery.component.html',
  styleUrls: ['./gallery.component.css']
})
export class GalleryComponent implements OnInit, AfterViewInit {
  products : {name: string, productId: string, image: string, price: number, desc: string, size: string, isPrintAvailable: boolean}[] = [];
  @ViewChild('gridView') gridView: any;
  columnNum = 3; //initial count
  tileSize = 450; //one tile should have this width

  setColNum(){
     let width = this.gridView.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() {
     this.setColNum();
   }

  constructor(private productService: ProductsService) {}

  ngOnInit(): void {
    this.products = this.productService.getProducts();
  }

}

加载时的样子

点击或调整屏幕大小等事件后的外观(如果我离开并返回，它会返回到顶部图像)

Answer 1

一页又一页地阅读后，我找到了一个解决方案，它不需要弄乱 typescript 文件并且可以完美运行。基本上，您创建一个指令来替换 cols 属性，其余的由该指令完成。我将添加 mat-grid-list 标签的代码以及 directive 的代码，但这是页面，这样我就可以感谢作者 https://www.mymiller.name/wordpress/programming/angular-material-grid-layout-responsive/

html

<mat-grid-list [gridCols]="{xs: 1, sm: 2, md: 3, lg: 4, xl: 5}">

指令

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Directive, Input, OnInit } from '@angular/core';
import { MatGridList } from '@angular/material/grid-list';

export interface GridColumns {
  xs: number;
  sm: number;
  md: number;
  lg: number;
  xl: number;
}
@Directive({
  selector: '[gridCols]'
})
export class GridColsDirective implements OnInit {
  private gridCols: GridColumns = {xs: 1, sm: 2, md: 4, lg: 6, xl: 8};

  public get cols(): GridColumns {
    return this.gridCols;
  }

  @Input('gridCols')
  public set cols(map: GridColumns) {
    if (map && ('object' === (typeof map))) {
      this.gridCols = map;
    }
  }

  public constructor(private grid: MatGridList, private breakpointObserver: BreakpointObserver) {
    if(this.grid != null) {
      this.grid.cols = this.gridCols.md;
    }
  }

  public ngOnInit(): void {
    if(this.grid != null) {
      this.grid.cols = this.gridCols.md;
    }
    this.breakpointObserver.observe([
      Breakpoints.XSmall,
      Breakpoints.Small,
      Breakpoints.Medium,
      Breakpoints.Large,
      Breakpoints.XLarge
    ]).subscribe(result => {

      if (result.breakpoints[Breakpoints.XSmall]) {
        this.grid.cols = this.gridCols.xs;
      }
      if (result.breakpoints[Breakpoints.Small]) {
        this.grid.cols = this.gridCols.sm;
      }
      if (result.breakpoints[Breakpoints.Medium]) {
        this.grid.cols = this.gridCols.md;
      }
      if (result.breakpoints[Breakpoints.Large]) {
        this.grid.cols = this.gridCols.lg;
      }
      if (result.breakpoints[Breakpoints.XLarge]) {
        this.grid.cols = this.gridCols.xl;
      }
    });
  }
}