14、前端开发中的路由、Shadow DOM、服务与表单模块详解

前端开发中的路由、Shadow DOM、服务与表单模块详解

1. 路由事件

路由会触发两个事件，可通过静态的 GlobalProvider 类来使用，示例代码如下：

GlobalProvider.routerAction.addEventListener('navigate', (evt) => {
  const route = evt.detail;
  evt.cancel = true;   // 可选择在执行前取消
});
GlobalProvider.routerAction.addEventListener('navigated', (evt) => {
  const route = evt.detail;
  // 此事件无法取消
});

如果使用动态组件并设置了事件处理程序，别忘了在 dispose 回调中移除该事件处理程序。

2. Shadow DOM

默认情况下不使用 Shadow DOM。若使用，意味着样式将被隔离，全局样式将不可用。
激活 Shadow DOM 的一种方式是使用装饰器：

@ShadowDOM()

也可显式设置参数，这是一种更具表现力的编码风格：

@ShadowDOM(true | false)
</