Angular.js实现带手柄自由调整页面大小

最近在做一个 Angular 项目，遇到一个挺常见的需求：让页面上的某个容器能通过拖动手柄自由调整尺寸。这类交互在仪表盘、代码编辑器或布局面板里很实用，今天就把两种实现方式整理一下——一个是用 Angular.js（也就是常说的 AngularJS）的原生指令，另一个是用现代 Angular 项目里自定义指令的方案。两者思路类似，但写法上差别不小，正好可以对比看看。

Angular.js 版本

在 AngularJS 里实现其实挺直观的，核心是利用指令（directive）来绑定拖拽事件。下面是一个完整的示例，包含 HTML、CSS 和指令逻辑：

  
  
  
  


  

    

      

    
  
  
  



这段代码里，指令 resizable 被加到 div 上，动态生成了一个右下角的手柄（黑色小方块），通过监听 mousedown、mousemove、mouseup 来更新元素的宽高。比较老派的写法，但胜在够清晰。

在 Angular 项目中的实现

到了现代 Angular（2+），我们不再用 link 函数，而是用 @Directive 装饰器配合 ElementRef 和 HostListener。核心逻辑完全一样，但代码结构更干净，也更贴合 TypeScript 类型系统。

首先，创建一个自定义指令：

import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
  selector: '[resizable]'
})
export class ResizableDirective {
  private isResizing = false;
  private initialX: number;
  private initialY: number;
  private originalWidth: number;
  private originalHeight: number;
  constructor(private elementRef: ElementRef) {}
  @HostListener('document:mousemove', ['$event'])
  onMouseMove(event: MouseEvent) {
    if (this.isResizing) {
      const width = this.originalWidth + (event.clientX - this.initialX);
      const height = this.originalHeight + (event.clientY - this.initialY);
      this.elementRef.nativeElement.style.width = width + 'px';
      this.elementRef.nativeElement.style.height = height + 'px';
    }
  }
  @HostListener('document:mouseup')
  onMouseUp() {
    this.isResizing = false;
  }
  @HostListener('mousedown', ['$event'])
  onMouseDown(event: MouseEvent) {
    event.preventDefault();
    this.isResizing = true;
    this.initialX = event.clientX;
    this.initialY = event.clientY;
    this.originalWidth = parseFloat(getComputedStyle(this.elementRef.nativeElement).getPropertyValue('width'));
    this.originalHeight = parseFloat(getComputedStyle(this.elementRef.nativeElement).getPropertyValue('height'));
  }
}

然后在组件的模板里直接加上属性选择器：



最后别忘了把指令声明到模块里：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ResizableDirective } from './resizable.directive';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent,
    ResizableDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样就能复用了。两种实现方式都很轻量，Angular.js 版更原生一些，Angular 版则利用了框架的依赖注入和宿主监听。根据实际项目的技术栈选一个就好。