Angular组件通信问题：非预期自动更新触发路由跳转

解决方案 #

1. 正确清理订阅与定时器 #

首先修复SearchHomeComponent的销毁逻辑，确保组件离开时取消订阅并清除自动更新定时器，避免内存泄漏和无效执行：

// 先在组件内声明autoUpdateInterval的类型
private autoUpdateInterval: number | null = null;

ngOnDestroy(): void {
  // 取消订阅
  if (this.tickerClickedSubscription) {
    this.tickerClickedSubscription.unsubscribe();
    console.log('unsubscribed from tickerClickedSubscription');
  }
  // 清除自动更新定时器
  if (this.autoUpdateInterval) {
    clearInterval(this.autoUpdateInterval);
    this.autoUpdateInterval = null;
  }
}

2. 仅在组件活跃时执行导航与自动更新 #

在searchTicker和updateResults方法中，添加路由判断逻辑，只有当SearchHomeComponent处于当前活跃路由时，才触发导航和自动更新逻辑：

searchTicker(searchInputValue: string) {
  // 根据你的实际路由配置，判断当前是否在SearchHome的路由下
  const isCurrentRouteActive = this.route.snapshot.routeConfig?.path === 'search-home';
  
  if (!isCurrentRouteActive) {
    // 不在当前路由时，仅执行基础搜索逻辑，跳过导航和自动更新
    // 这里放置你的基础搜索实现代码
    return;
  }

  // 处于当前路由时，执行完整逻辑
  // search ticker 基础实现代码

  // 设置自动更新
  this.autoUpdateInterval = setInterval(() => {
    this.updateResults(searchInputValue);
  }, 15000);
}

updateResults(inputValue: string){
  // more code
  // 再次判断路由，确保只在当前组件活跃时导航
  const isCurrentRouteActive = this.route.snapshot.routeConfig?.path === 'search-home';
  if (isCurrentRouteActive) {
    this.router.navigate(['/search', inputValue]);
  }
}

3. 可选：通过路由监听维护组件活跃状态 #

如果需要更精准的路由状态判断，可以监听路由事件，维护一个组件活跃状态变量：

private isComponentActive = false;

ngOnInit(){
  // 监听路由变化，更新组件活跃状态
  this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      // 根据实际路由路径调整判断条件
      this.isComponentActive = event.url.includes('/search-home');
    }
  });

  this.tickerClickedSubscription = this.searchService.tickerClicked$.subscribe(ticker => {
    if (this.isComponentActive) {
      this.searchTicker(ticker);
    } else {
      // 不在当前路由时，仅执行基础搜索逻辑
      // 这里放置你的基础搜索实现代码
    }
  });
}

关键说明 #

• 取消订阅不会禁用整个SearchService，只是当前组件停止监听事件；当回到SearchHomeComponent时，ngOnInit会重新创建订阅，点击事件依然有效。
• 定时器必须在组件销毁时清除，否则组件销毁后定时器仍会运行，导致不必要的导航和资源消耗。
• 路由判断的路径字符串需要根据你的实际路由配置调整。

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