在Angular中创建JSON查询参数的最佳方法

我有一个用typescript编写的angular2.x应用程序，需要根据用户与UI的交互动态创建JSON结构。JSON结构由key:value参数和数组组成。然后将此JSON结构作为HTTP参数发送到API

JSON结构的简化示例：

{
  'key_1': 'param_1',
  'key_2:  'param_2',
  'array_key_1': [
     {
       'key_1_1': 'value_1_1',
       'key_1_2': 'value_1_2
     },
     {
       'key_2_1': 'value_2_1',
       'key_2_2': 'value_2_2'
     }
  ],
  'array_key_2': [
           {
       'key_1_1': 'value_1_1',
       'key_1_2': 'value_1_2,
       'someArray': [...]
     },
     {
       'key_2_1': 'value_2_1',
       'key_2_2': 'value_2_2'
       'someArray': [..]
     }
  ]
}

此JSON结构用作数据库的查询

当前实施 最初，我在组件中声明了一个

public sqlJSON:Object={}

，并使用

ngOnInit（）

LifeCycleHook初始化空数组（这是必需的，因为如果没有初始化，Angular在将条目推入数组时将无法识别该数组）

如果用户将主题更改为另一个感兴趣的主题，我将使用

ngOnChanges

LifeCycleHook重置JSON结构。例如，

sqlJSON['array\u key\u 1]=[]

等等

查询 有没有更好的方法来创建这样的JSON结构？例如，我们可以使用

localStorage

来实现同样的目的吗？请记住，如果用户经常与UI交互，JSON可能会变得非常大？在

localStorage

中存储此类JSON结构时，也存在内存限制

另外值得注意的是，由于后端需求不断变化，上述JSON结构需要不断添加/删除新的key:value参数

---

是否可以使用

接口

来构建此JSON？我认为，由于不断添加/删除参数，

接口将更具适应性。
您好，我会订阅路由器事件更改，因为它已经存在并且不太容易出错。请阅读此帖子：嗨，我的问题不是我的应用程序中是否有路由更改。为了澄清这一点，用户在组件的同一路径中进行交互，并且在组件中，动态JSON会随着每次交互而改变。因此，你的链接没有回答我的问题好的，是的，它没有帮助。要存储“较大”数量的数据而不是
localStorage
，可以使用
IndexedDb
。通过这种方式，您可以在交互上存储数据，并在需要时进行查询。