Angular中如何获取复用name组件输入框的矩形四顶点坐标？

1. 在name.component中获取输入框的矩形坐标 #

通过@ViewChild获取输入框的DOM引用，调用元素的getBoundingClientRect()方法即可拿到元素相对于浏览器视口的矩形位置信息，包含top、right、bottom、left四个顶点的坐标值，完全匹配你的需求。

示例代码：

// name.component.ts
import { Component, ElementRef, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { RightClickService } from './right-click.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-name',
  templateUrl: './name.component.html'
})
export class NameComponent implements OnInit, OnDestroy {
  @ViewChild('inputEl') inputEl!: ElementRef<HTMLInputElement>;
  @Input() componentType!: 'first-name' | 'last-name' | 'middle-name' | 'maiden-name';
  private rightClickSub!: Subscription;

  constructor(private rightClickService: RightClickService) {}

  ngOnInit() {
    // 订阅父组件广播的右键事件
    this.rightClickSub = this.rightClickService.rightClickEvent$.subscribe(event => {
      this.checkIfClickedSelf(event);
    });
  }

  private checkIfClickedSelf(event: MouseEvent) {
    if (!this.inputEl.nativeElement) return;
    
    // 获取输入框当前的实时矩形坐标
    const rect = this.inputEl.nativeElement.getBoundingClientRect();
    // 判断点击坐标是否落在输入框范围内
    const isClicked = event.clientX >= rect.left && 
                      event.clientX <= rect.right && 
                      event.clientY >= rect.top && 
                      event.clientY <= rect.bottom;
    
    if (isClicked) {
      // 根据组件标识展示对应右键菜单
      switch(this.componentType) {
        case 'first-name':
          console.log('展示FirstName专属菜单');
          break;
        case 'last-name':
          console.log('展示LastName专属菜单');
          break;
        // 其他组件类型的菜单逻辑
      }
    }
  }

  ngOnDestroy() {
    // 销毁时取消订阅，避免内存泄漏
    this.rightClickSub.unsubscribe();
  }
}

对应的模板name.component.html：

<!-- name.component.html -->
<label>{{ componentType.replace('-', ' ') }}:</label>
<input #inputEl type="text" />

2. 创建共享服务传递右键事件 #

用共享服务来广播app.component的右键事件，让所有name组件实例都能监听：

// right-click.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class RightClickService {
  rightClickEvent$ = new Subject<MouseEvent>();

  broadcastRightClick(event: MouseEvent) {
    this.rightClickEvent$.next(event);
  }
}

3. 在app.component中监听右键事件并广播 #

在根组件里监听全局右键事件，通过服务把事件传递给所有子组件：

// app.component.ts
import { Component, HostListener } from '@angular/core';
import { RightClickService } from './right-click.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private rightClickService: RightClickService) {}

  @HostListener('document:contextmenu', ['$event'])
  onRightClick(event: MouseEvent) {
    // 阻止浏览器默认右键菜单弹出
    event.preventDefault();
    // 广播右键事件给所有订阅的组件
    this.rightClickService.broadcastRightClick(event);
  }
}

额外提示 #

• 通过@Input给每个name组件实例传递唯一标识，能直接根据标识区分菜单，逻辑更清晰。
• getBoundingClientRect()会实时返回元素的最新坐标，即使窗口滚动或元素位置变化也能准确判断。

内容的提问来源于stack exchange，提问作者Moshik Amit