如何在Stenciljs v2.19.0中拦截组件切换前的用户确认？

单纯依赖Stencil的组件生命周期无法实现这个需求——因为Stencil的所有生命周期钩子中，disconnectedCallback确实是组件已经从DOM中移除后才触发的，没有提供“组件即将被移除前”的拦截时机。

要实现页面切换前的确认弹窗，得从路由跳转拦截入手（毕竟页面组件的移除是路由切换的结果），以下是具体实现思路：

1. 利用路由的跳转前事件拦截 #

不管你用的是Stencil官方的@stencil/router还是其他路由库，几乎都支持“路由即将变更”的事件监听。以@stencil/router为例：

步骤1：在根组件监听路由变更事件 #

在你的应用根组件（比如app-root）中，通过@Listen装饰器监听routerWillChange事件，这个事件会在路由实际跳转前触发：

import { Component, Listen } from '@stencil/core';
import { RouterEventDetail } from '@stencil/router';

@Component({
  tag: 'app-root',
})
export class AppRoot {
  @Listen('routerWillChange')
  async onRouteWillChange(event: CustomEvent<RouterEventDetail>) {
    // 获取当前处于活跃状态的页面组件
    const activePage = document.querySelector('stencil-route[active] > *');
    
    // 如果当前页面组件实现了自定义的退出确认方法，就调用它
    if (activePage && typeof (activePage as any).canExit === 'function') {
      const allowExit = await (activePage as any).canExit();
      
      if (!allowExit) {
        // 阻止默认路由跳转
        event.preventDefault();
        
        // 这里可以替换成你自己的模态框组件逻辑
        const confirmExit = confirm('你确定要离开当前页面吗？');
        if (confirmExit) {
          // 用户确认后，手动执行跳转
          window.location.href = event.detail.url;
        }
      }
    }
  }
}

步骤2：在需要拦截的页面组件中实现退出确认方法 #

给需要弹出确认框的页面组件添加一个canExit方法，用来判断是否允许用户退出：

import { Component } from '@stencil/core';

@Component({
  tag: 'page-settings',
})
export class PageSettings {
  // 示例：根据表单是否修改来决定是否触发确认
  hasUnsavedChanges = false;

  canExit(): boolean | Promise<boolean> {
    // 如果有未保存的修改，弹出确认框
    if (this.hasUnsavedChanges) {
      return confirm('你有未保存的修改，确定要离开吗？');
    }
    // 没有修改，直接允许退出
    return true;
  }

  // 表单输入时标记为有未保存修改
  handleInputChange() {
    this.hasUnsavedChanges = true;
  }
}

2. 核心逻辑说明 #

• Stencil组件生命周期没有“移除前拦截”的钩子，所以必须从触发组件移除的源头（路由跳转）入手拦截。
• 通过路由跳转前的事件，我们可以拿到当前页面组件实例，调用其自定义的确认逻辑，再决定是否允许路由继续跳转。
• 如果用的是非官方路由库，思路类似：找到路由跳转前的拦截钩子，在钩子中调用页面组件的确认方法，阻止或允许跳转。

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