Angular手动切换组件时全局服务重复创建问题如何解决

核心原因分两类，对应修复方式如下： #

1. 服务作用域配置错误（单页内跳转即触发重建） #

如果通过Angular内置路由跳转（routerLink/router.navigate）时也会触发服务构造函数重复调用，属于服务提供器配置错误：

• 禁止在FirstComponent、SecondComponent的@Component装饰器providers数组中单独声明GlobalserviceService
• 禁止在两个组件所属的独立特性模块providers数组中重复声明该服务
• 正确的全局单例配置：在服务自身的@Injectable装饰器中声明根作用域提供，代码如下：

@Injectable({
  providedIn: 'root'
})
export class GlobalserviceService {
  constructor() {
    // 此配置下构造函数仅会在应用首次加载时调用一次
  }
  // 服务自身的业务逻辑、存储属性
}

2. 手动输入URL触发整页重载（地址栏跳转/强制刷新场景） #

直接在浏览器地址栏输入URL、按F5刷新页面的行为，会触发浏览器全量加载新文档，整个Angular应用会被完全销毁后重新启动，所有内存中存储的JS状态都会被清空——这种场景下无论怎么配置服务作用域，服务都会被重新实例化，内存数据必然丢失。
如果需要在整页重载后保留数据，选择以下任意持久化方案即可：

• 小体量配置类/状态类数据，存入localStorage或sessionStorage，服务构造函数初始化时优先从本地存储读取对应值
• 大体量结构化数据，使用IndexedDB做前端持久化
• 核心业务数据，存储至服务端，服务初始化时通过接口拉取对应数据

注意：纯内存态的服务不可能在浏览器整页重载后保留数据，这是浏览器的基础运行机制决定的，和Angular框架本身无关。

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