一个 NGRX 商店，多个 Angular 应用程序

Question

所以我对此有点不以为然。希望你能给我道歉。我正在尝试将多个 Angular 元素（Web 组件）插入到 Prestashop 模块，即 PHP。由于没有一个包含许多模块的 Angular 应用程序，我无法使用商店将数据从一个元素发送到另一个元素。我想过创建一个负责创建 NGRX 商店的库，并将其保存到 window.store（例如），因此同一个商店可以被多个独立的角度应用程序使用。这里的问题是我必须在许多 Angular 元素中调用库，所以我在构造函数中注入了不同的存储。我对吗？例如：import {  ActionReducer,  ActionReducerFactory,  ActionReducerMap,  ActionReducerMap,  ActionsSubject,  ReducerManager,  ReducerManagerDispatcher,  StateObservable,  Store,} from '@ngrx/store'import { Observable } from 'rxjs';const storeName = 'store'@Injectable({  providedIn: 'root'})export class StoreSyncService {  store: any = null  // option 1 constructor:  // are we, when including the library in others angular apps, instantiating store over and over?  constructor(private store: Store) {     if (window[storeName]) {      this.store = window[storeName]    } else{      window[storeName] = this.store    }  }  // option 2 constructor (please apologise me as I don't know how injection works very well).  // Any link to clarify this is welcome  constructor() {    if (window[storeName]) {      this.store = window[storeName]    } else{      const stateObservable$: StateObservable = new Observable()      const actionsObserver: ActionsSubject = new ActionsSubject()      const dispatcher: ReducerManagerDispatcher = new ActionsSubject()      const initialState = {}      const reducers: ActionReducerMap<any, any> = {}      const reducerFactory: ActionReducerFactory<any, any> =  whatever      const reducerManager: ReducerManager = new ReducerManager(dispatcher, initialState, reducers, reducerFactory)      this.store = new Store(stateObservable$, actionsObserver, reducerManager)      window[storeName] = this.store    }所以回顾一下，如果我想在多个独立的角度应用程序之间共享状态，你会怎么做？我尝试使用 localStorage，添加事件以将 NGRX 状态与本地存储中的数据同步，反之亦然，但有时会出现无限循环，有时会出现数据不同步的边缘情况。感谢您的帮助和理解

Answer 1

所以现在，我找到了一种解决方法来避免商店的双重实例化。使用条件注入器。

  import { Injectable, Injector } from '@angular/core';

  ...

  constructor(private injector : Injector) {

    if (window[storeName]) {

      this.store = window[storeName]

    } else{

      this.store = this.injector.get<Store>(Store);

      window[storeName] = this.store

    }

  }

我还没有测试它在独立应用程序之间共享数据。让我们希望它有效。

随时欢迎任何建议！