Angular CLI项目双击路由显示双组件问题求助

根据你描述的现象——双击设备时同时显示Overview和Detail页面，但右键菜单点击同一方法却正常——大概率是双击事件的处理缺失了必要的事件拦截，或者短时间内重复触发导航导致的路由异常，结合你的Angular版本（5.x，对应CLI 1.7.4），可以从以下几个方向排查解决：

1. 给双击事件添加默认行为与冒泡拦截 #

右键菜单的点击事件你已经调用了event.preventDefault()来阻止默认行为，但双击事件没有做同样的处理。浏览器的默认双击行为（比如选中元素、触发两次click事件）可能干扰路由导航逻辑，导致意外的组件渲染。

修改双击事件的初始化代码：

object.dblclick((event) => {
  // 阻止浏览器默认双击行为
  event.preventDefault();
  // 阻止事件冒泡到父元素，避免触发其他无关事件
  event.stopPropagation();
  diagram.showDeviceDetails(_this);
});

2. 确保路由导航是单一且防抖的 #

虽然你说两种方式调用的是同一个showDeviceDetails方法，但双击事件可能在极短时间内触发两次导航请求（部分浏览器会把dblclick拆解为两次click），而Angular 5.x的路由在处理连续导航时可能出现异常。

可以给导航逻辑添加防抖处理，避免重复请求：

// 在提供showDeviceDetails方法的组件/服务中
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { Router } from '@angular/router';

// 定义一个Subject用于防抖
private navigationTrigger$ = new Subject<string>();

constructor(private router: Router) {
  // 订阅防抖后的导航请求
  this.navigationTrigger$.pipe(debounceTime(200)).subscribe(deviceId => {
    this.router.navigate(['/details', deviceId]);
  });
}

showDeviceDetails(device) {
  // 发送导航请求到Subject，而非直接调用router.navigate
  this.navigationTrigger$.next(device.id);
}

3. 检查路由出口与路由配置 #

确认你的根组件（通常是AppComponent）中只有一个<router-outlet>标签——如果存在多个路由出口，Angular会同时渲染匹配到的组件，这就会出现两个页面同时显示的情况。

另外，你的路由配置看起来是正常的，但可以再确认pathMatch: 'full'的重定向逻辑没有被意外覆盖，确保空路径只会重定向到/overview一次。

4. 排查AuthGuardService的异步逻辑 #

如果你的AuthGuardService中包含异步操作（比如请求用户权限），双击时可能因为异步竞态导致守卫逻辑异常，允许了两个路由同时通过。可以在守卫中添加日志，确认两种触发方式下守卫的执行流程是否一致。

按照上述步骤逐一排查，应该能解决双击时的异常问题。

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