Angular如何不使用Service创建可多组件共享、变更同步的布尔型全局变量

所有方案均无需封装Service层即可实现全局变量复用、跨组件变更同步。

通用实现方案（不绑定任何框架/库） #

基于全局作用域+订阅发布模式实现，兼容所有前端场景。

• 第一步：在项目全局入口文件（如main.js/app.js）挂载全局状态逻辑

// 直接挂载到window全局对象，无Service依赖
window.__GLOBAL_BOOL_FLAG = {
  value: false, // 布尔变量初始值
  _subscribers: new Set(), // 存储所有组件的变更回调
  // 修改变量方法，赋值后自动通知所有订阅组件
  set: function(newVal) {
    if (typeof newVal !== 'boolean') throw new Error('仅支持布尔类型赋值')
    if (this.value === newVal) return
    this.value = newVal
    this._subscribers.forEach(cb => cb(newVal))
  },
  // 组件订阅变更的方法
  subscribe: function(cb) {
    this._subscribers.add(cb)
    cb(this.value) // 首次订阅直接返回当前值
    // 返回取消订阅方法，组件销毁时调用避免内存泄漏
    return () => this._subscribers.delete(cb)
  }
}

• 第二步：任意组件中使用

// 组件初始化时订阅变量变更
const unsubscribe = window.__GLOBAL_BOOL_FLAG.subscribe((latestVal) => {
  // 此处写组件的视图更新/逻辑处理代码
  console.log('全局布尔变量最新值：', latestVal)
})

// 组件销毁时调用，清理订阅
// unsubscribe()

// 任意组件中修改变量，所有订阅组件都会收到最新值
window.__GLOBAL_BOOL_FLAG.set(true)

Vue框架专属实现（基于provide/inject，无Service） #

利用Vue原生响应式能力实现，无需额外订阅逻辑。

• 根组件（App.vue）中全局提供变量

<script setup>
import { provide, ref } from 'vue'
const globalBoolFlag = ref(false) // 创建响应式布尔变量
provide('GLOBAL_BOOL_FLAG', globalBoolFlag) // 对所有后代组件暴露
</script>

• 任意后代组件注入使用

<script setup>
import { inject } from 'vue'
const globalBoolFlag = inject('GLOBAL_BOOL_FLAG')

// 读取值：console.log(globalBoolFlag.value)
// 修改值：globalBoolFlag.value = true
// 响应式自动同步，所有引用组件都会自动更新视图
</script>

React框架专属实现（基于Context API，无Service） #

利用React原生上下文能力实现，无需Service封装。

• 第一步：创建全局上下文文件

import { createContext, useContext, useState } from 'react'

const GlobalBoolContext = createContext()

// 全局Provider组件，入口处包裹整个应用
export function GlobalBoolProvider({ children }) {
  const [boolFlag, setBoolFlag] = useState(false)
  return (
    <GlobalBoolContext.Provider value={[boolFlag, setBoolFlag]}>
      {children}
    </GlobalBoolContext.Provider>
  )
}

// 封装调用Hook，组件中直接使用
export function useGlobalBool() {
  return useContext(GlobalBoolContext)
}

• 第二步：入口文件包裹应用

import { GlobalBoolProvider } from './global-bool-context'

ReactDOM.createRoot(document.getElementById('root')).render(
  <GlobalBoolProvider>
    <App />
  </GlobalBoolProvider>
)

• 第三步：任意组件中使用

import { useGlobalBool } from './global-bool-context'

function DemoComponent() {
  const [boolFlag, setBoolFlag] = useGlobalBool()
  // 读取值：{boolFlag ? '开启' : '关闭'}
  // 修改值：setBoolFlag(true)，所有调用该Hook的组件自动同步最新值
  return <div>{boolFlag}</div>
}

内容的提问来源于stack exchange，提问作者Mani Serisha Kothapalli