如何在Ionic 4中获取Ionic组件（如ion-grid）的宽度？以及创建宽高相等正方形场景下的ion-grid高度获取方法

嘿，我来帮你搞定这两个Ionic 4的问题，都是日常开发里很常见的场景，咱们一个个来：

要获取ion-grid这类Ionic组件的宽度，核心思路是先拿到组件对应的DOM元素引用，然后读取它的尺寸属性。具体可以这么做：

• 在模板中给ion-grid添加模板引用变量
  在你的组件模板里，给目标ion-grid加一个#开头的引用名，比如：

  <ion-grid #myGrid>
    <!-- 你的内容 -->
  </ion-grid>
  

• 在组件类中获取元素引用并读取宽度
  借助Angular的ViewChild装饰器，在组件类里拿到这个元素的引用，然后在AfterViewInit生命周期钩子中读取宽度（因为只有组件视图初始化完成后，DOM元素才存在）。代码示例：

  import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.scss'],
  })
  export class YourComponentComponent implements AfterViewInit {
    @ViewChild('myGrid') gridRef: ElementRef;
  
    ngAfterViewInit() {
      // 获取元素的宽度（clientWidth是内容+内边距，不含边框和滚动条）
      const gridWidth = this.gridRef.nativeElement.clientWidth;
      // 或者用offsetWidth，包含内容+内边距+边框
      // const gridWidth = this.gridRef.nativeElement.offsetWidth;
      console.log('ion-grid的宽度是:', gridWidth);
    }
  }
  

注意：如果你的ion-grid是在*ngIf或者其他动态渲染的结构里，可能需要在视图稳定后再获取，比如用setTimeout或者ChangeDetectorRef来确保元素已渲染。

这里有两种常用方案，根据你的需求选：

方案1：纯CSS实现（更简洁，无需JS） #

利用CSS中padding-top百分比基于父元素宽度计算的特性，可以轻松实现正方形：

• 模板结构：给ion-grid内部套一个容器，用来承载正方形内容：

  <ion-grid #myGrid>
    <div class="square-container">
      <div class="square-content">
        <!-- 你的正方形内容 -->
      </div>
    </div>
  </ion-grid>
  

• SCSS样式：

  .square-container {
    width: 100%; // 占满ion-grid的宽度
    padding-top: 100%; // 高度等于宽度，形成正方形
    position: relative;
  }
  
  .square-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // 这里可以加你需要的样式，比如背景色、布局等
  }
  

  这个方案的好处是自动响应窗口大小变化，不需要额外的JS逻辑。

方案2：TypeScript动态设置高度（适合需要在代码中获取尺寸做其他操作的场景） #

如果需要在代码中拿到ion-grid的宽度并动态设置高度，可以结合问题1的方法，再加上窗口resize监听：

import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
})
export class YourComponentComponent implements AfterViewInit, OnDestroy {
  @ViewChild('myGrid') gridRef: ElementRef;
  private resizeObserver: ResizeObserver;

  ngAfterViewInit() {
    this.setGridHeight();
    // 监听窗口大小变化，实时更新高度
    this.resizeObserver = new ResizeObserver(() => {
      this.setGridHeight();
    });
    this.resizeObserver.observe(this.gridRef.nativeElement);
  }

  private setGridHeight() {
    const gridElement = this.gridRef.nativeElement;
    const gridWidth = gridElement.clientWidth;
    gridElement.style.height = `${gridWidth}px`;
  }

  ngOnDestroy() {
    // 销毁监听，避免内存泄漏
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
  }
}

这样当窗口大小变化（比如屏幕旋转）时，ion-grid的高度会自动跟着宽度调整，保持正方形。

内容的提问来源于stack exchange，提问作者Jean-Paul Abi-Ghosn