如何在 Angular 表中创建可调整大小的列：分步指南

Angular Material 表提供了一种时尚的数据显示方式。然而，用户通常需要额外的功能，例如调整表列大小以更好地控制数据显示的能力。在本指南中，我们将逐步介绍使用自定义指令在 Angular 表中创建可调整大小的列的过程。您将学习如何设置指令、调整大小的样式以及逐步实施列大小调整。

介绍

向 Angular Material 表添加可调整大小的列涉及创建侦听鼠标事件的自定义指令，允许用户单击并拖动列以调整其宽度。这为用户提供了灵活性，特别是在处理大型数据集时，改善了用户体验。

在本教程中，我们将：

• 创建自定义列调整大小指令。
• 处理鼠标事件以调整列大小。
• 应用样式以获得流畅的用户体验。
• 将指令附加到 Angular Material 表。

让我们深入探讨一下。

第 1 步：设置角度材质表

首先，确保您的 Angular 项目安装了 Angular Material。如果没有，请运行以下命令将 Angular Material 添加到您的项目中：

ng add @angular/material

安装 Angular Material 后，您可以使用以下代码创建基本表格。

表格的 HTML:

  
{{ column }}
      
{{ element[column] }}
    

在这里，我们使用 Angular Material 中的 mat-table 来显示一个简单的表格。 appColumnResize 指令应用于 th（标题）元素以使列可调整大小。

表格数据：

import { Component, ViewEncapsulation } from '@angular/core';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
  // ... add more data
];

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.scss'],
  templateUrl: 'table-basic-example.html',
  encapsulation: ViewEncapsulation.None,
})
export class TableBasicExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}

该组件包含周期性元素的数据，我们将在表中显示这些数据。

第 2 步：创建列调整大小指令

接下来，我们将实现一个自定义 Angular 指令，该指令支持调整表列大小的功能。

指令实施：

import {
  Directive,
  ElementRef,
  Renderer2,
  NgZone,
  Input,
  OnInit,
  OnDestroy,
} from '@angular/core';
import { fromEvent, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Directive({
  selector: '[appColumnResize]',
})
export class ColumnResizeDirective implements OnInit, OnDestroy {
  @Input() resizableTable: HTMLElement | null = null;

  private startX!: number;
  private startWidth!: number;
  private isResizing = false;
  private column: HTMLElement;
  private resizer!: HTMLElement;
  private destroy$ = new Subject();

  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    private zone: NgZone
  ) {
    this.column = this.el.nativeElement;
  }

  ngOnInit() {
    this.createResizer();
    this.initializeResizeListener();
  }

  private createResizer() {
    this.resizer = this.renderer.createElement('div');
    this.renderer.addClass(this.resizer, 'column-resizer');
    this.renderer.setStyle(this.resizer, 'position', 'absolute');
    this.renderer.setStyle(this.resizer, 'right', '0');
    this.renderer.setStyle(this.resizer, 'top', '0');
    this.renderer.setStyle(this.resizer, 'width', '5px');
    this.renderer.setStyle(this.resizer, 'cursor', 'col-resize');
    this.renderer.appendChild(this.column, this.resizer);
  }

  private initializeResizeListener() {
    this.zone.runOutsideAngular(() => {
      fromEvent(this.resizer, 'mousedown')
        .pipe(takeUntil(this.destroy$))
        .subscribe((event: MouseEvent) => this.onMouseDown(event));

      fromEvent(document, 'mousemove')
        .pipe(takeUntil(this.destroy$))
        .subscribe((event: MouseEvent) => this.onMouseMove(event));

      fromEvent(document, 'mouseup')
        .pipe(takeUntil(this.destroy$))
        .subscribe(() => this.onMouseUp());
    });
  }

  private onMouseDown(event: MouseEvent) {
    event.preventDefault();
    this.isResizing = true;
    this.startX = event.pageX;
    this.startWidth = this.column.offsetWidth;
  }

  private onMouseMove(event: MouseEvent) {
    if (!this.isResizing) return;
    const width = this.startWidth   (event.pageX - this.startX);
    this.renderer.setStyle(this.column, 'width', `${width}px`);
  }

  private onMouseUp() {
    if (!this.isResizing) return;
    this.isResizing = false;
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

解释：

• createResizer()：将调整器元素 (div) 添加到列标题。
• onMouseDown()：当用户点击缩放器时触发，记录初始位置。
• onMouseMove()：当用户拖动缩放器时更新列宽。
• onMouseUp()：当用户释放鼠标按钮时结束调整大小。

第 3 步：调整大小调整器的样式

我们需要设置调整大小的样式，以便用户知道它是可拖动的。将以下 CSS 添加到您的样式中：

.resizable-table {
  th {
    position: relative;

    .column-resizer {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 10px;
      cursor: col-resize;
      z-index: 1;

      &:hover {
        border-right: 2px solid red;
      }
    }

    &.resizing {
      user-select: none;
    }
  }

  &.resizing {
    cursor: col-resize;
    user-select: none;
  }
}

此 CSS 正确定位调整大小，添加悬停效果，并更改光标以指示可调整大小。

第 4 步：测试表

既然指令和样式都已就位，请尝试调整列的大小。您应该能够单击调整器，向左或向右拖动它，并动态调整每列的宽度。

常见问题解答

问：如果可调整大小的表格太宽会发生什么？

A：表格会溢出并根据容器的宽度进行调整。确保添加适当的滚动行为或容器调整来处理大型表格。

问：我可以使特定列不可调整大小吗？

答：是的，您可以使用 Angular 的内置结构指令（例如 *ngIf.

问：这种方法对于大型表来说性能友好吗？

答：此解决方案适用于中等大小的桌子。然而，对于非常大的数据集，您可能希望通过使用 Angular 的更改检测策略或虚拟滚动机制来进一步优化。

结论

通过遵循本指南，您现在可以为 Angular Material 表提供功能齐全的可调整大小的列功能。这种自定义增强了表格的灵活性和可用性，提供更好的用户体验。快乐编码！