Angular项目中如何限制鼠标移动事件只在当前Tab页中触发？

在Angular项目中，你可以使用一个共享的服务来实现鼠标移动事件只在当前的tab页中产生。\n\n首先，创建一个名为MouseService的共享服务：\n\ntypescript\nimport { Injectable } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class MouseService {\n private mouseMoveSubject: Subject<MouseEvent> = new Subject<MouseEvent>();\n\n constructor() { }\n\n getMouseMoveObservable(): Observable<MouseEvent> {\n return this.mouseMoveSubject.asObservable();\n }\n\n emitMouseMoveEvent(event: MouseEvent) {\n this.mouseMoveSubject.next(event);\n }\n}\n\n\n然后，在你的每个tab页组件中注入MouseService，并在鼠标移动事件中调用emitMouseMoveEvent方法：\n\ntypescript\nimport { Component, OnInit, HostListener } from '@angular/core';\nimport { MouseService } from 'path/to/mouse.service';\n\n@Component({\n selector: 'app-tab1',\n templateUrl: './tab1.component.html',\n styleUrls: ['./tab1.component.css']\n})\nexport class Tab1Component implements OnInit {\n\n constructor(private mouseService: MouseService) { }\n\n ngOnInit() {\n }\n\n @HostListener('mousemove', ['$event'])\n onMouseMove(event: MouseEvent) {\n this.mouseService.emitMouseMoveEvent(event);\n }\n}\n\n\n最后，在你的其他tab页组件中，订阅MouseService的getMouseMoveObservable方法来获取鼠标移动事件：\n\ntypescript\nimport { Component, OnInit } from '@angular/core';\nimport { MouseService } from 'path/to/mouse.service';\n\n@Component({\n selector: 'app-tab2',\n templateUrl: './tab2.component.html',\n styleUrls: ['./tab2.component.css']\n})\nexport class Tab2Component implements OnInit {\n\n constructor(private mouseService: MouseService) { }\n\n ngOnInit() {\n this.mouseService.getMouseMoveObservable().subscribe((event: MouseEvent) => {\n // 处理鼠标移动事件\n });\n }\n}\n\n\n这样，只有当前的tab页中的鼠标移动事件才会被订阅到，其他的tab页不会接收到鼠标移动事件。