Angular 项目中跨 Tab 页共享鼠标移动事件的处理方法

在 Angular 项目中，每个 Tab 页都有自己的组件和生命周期。当鼠标在当前 Tab 页中移动时产生的事件只会传递给当前 Tab 页的组件。

如果其他的 Tab 页也产生了事件，可能是因为事件的处理逻辑在 Tab 页组件外部，比如在父组件或者服务中处理事件。此时可以考虑以下几种处理方式：

使用事件总线：创建一个事件总线服务，用于在不同组件之间传递事件。在当前 Tab 页中监听鼠标移动事件，当事件触发时，通过事件总线服务将事件发送给其他 Tab 页的组件进行处理。

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

@Injectable({
  providedIn: 'root',
})
export class EventBusService {
  private mouseMoveSubject = new Subject<MouseEvent>();
  mouseMove$ = this.mouseMoveSubject.asObservable();

  publishMouseMove(event: MouseEvent) {
    this.mouseMoveSubject.next(event);
  }
}

// current-tab.component.ts
import { Component, HostListener } from '@angular/core';
import { EventBusService } from 'path/to/event-bus.service';

@Component({
  selector: 'app-current-tab',
  template: `
    <div (mousemove)="onMouseMove($event)">...</div>
  `,
})
export class CurrentTabComponent {
  constructor(private eventBus: EventBusService) {}

  onMouseMove(event: MouseEvent) {
    this.eventBus.publishMouseMove(event);
  }
}

// other-tab.component.ts
import { Component, OnInit } from '@angular/core';
import { EventBusService } from 'path/to/event-bus.service';

@Component({
  selector: 'app-other-tab',
  template: `...`,
})
export class OtherTabComponent implements OnInit {
  constructor(private eventBus: EventBusService) {}

  ngOnInit() {
    this.eventBus.mouseMove$.subscribe(event => {
      // 处理鼠标移动事件
    });
  }
}

使用共享服务：创建一个共享服务，用于存储和共享事件信息。在当前 Tab 页中监听鼠标移动事件，将事件信息保存到共享服务中。其他 Tab 页的组件通过共享服务获取事件信息进行处理。

// shared.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class SharedService {
  mouseMoveEvent: MouseEvent;

  setMouseMoveEvent(event: MouseEvent) {
    this.mouseMoveEvent = event;
  }
}

// current-tab.component.ts
import { Component, HostListener } from '@angular/core';
import { SharedService } from 'path/to/shared.service';

@Component({
  selector: 'app-current-tab',
  template: `
    <div (mousemove)="onMouseMove($event)">...</div>
  `,
})
export class CurrentTabComponent {
  constructor(private sharedService: SharedService) {}

  onMouseMove(event: MouseEvent) {
    this.sharedService.setMouseMoveEvent(event);
  }
}

// other-tab.component.ts
import { Component, OnInit } from '@angular/core';
import { SharedService } from 'path/to/shared.service';

@Component({
  selector: 'app-other-tab',
  template: `...`,
})
export class OtherTabComponent implements OnInit {
  mouseMoveEvent: MouseEvent;

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.mouseMoveEvent = this.sharedService.mouseMoveEvent;
  }
}

通过以上两种方式，可以在不同的 Tab 页中共享事件信息并进行处理。具体选择哪种方式取决于你的项目需求和架构设计。