使用 Angular 2 序列化和反序列化 JSON答案

【问题标题】：Serialize and deserialize JSON with Angular 2使用 Angular 2 序列化和反序列化 JSON
【发布时间】：2018-04-09 10:21:48
【问题描述】：

我想使用 Angular 2 制作一个浏览器应用程序，您可以在其中制作和共享模拟考试。我有一个包含 ExamSection 类实例的 Exam 类实例，其中包含 ExamQuestion 类实例等。

我希望应用能够以 JSON 格式保存和加载考试。我目前的解决方案是：

constructor(private http:Http) {
    this.http.get('Exam.json')
            .map((response) => {
              return response.json();

            }).subscribe(data => {
              this.exam = <Exam>data;
              //console.log(typeof(<Exam>data));
              console.log(this.exam);
              this.refreshMarksMethods(this.exam);
            });

}

第一个问题是 JSON 被反序列化为普通对象。我尝试使用 serializer.ts (https://www.npmjs.com/package/serializer.ts) 和 class-transformer(https://github.com/pleerock/class-transformer) 对 Angular 使用的 TypeScript 类进行序列化和反序列化，但我不断收到与缺少模块有关的错误。据我所知，这些库的示例中没有引用缺少的模块，所以我不知道它们属于哪里。

我试图解决这个问题的一个技巧是将普通对象转换为所需的 Typescript 类型，但这不起作用（对象类型不会改变）。因为对象是普通对象，所以我放弃了方法以及长度等属性（对于数组）。

有人可以向我解释一下我将如何在 Angular 应用程序中将 TypeScript 对象与 JSON 转换，包括所需的库如何以及在哪里？有时将模块放在“node_modules”文件夹中是可行的，有时它属于“src”文件夹中的某个位置（我通常必须通过反复试验来解决这个问题）。

编辑：我得到了一个 hacky 解决方案，其中 JSON 中描述的对象有一个“反序列化”方法，用于递归地重建类实例。我希望有人能解释如何使用不同的解决方案，因为我怀疑我目前的解决方案是否适用于大型项目。

【问题讨论】：

你是这样的吗？ stackoverflow.com/questions/22875636/… 现在您实际上并没有创建类的 instances，而只是告诉编译器您希望数据的类型为 Exam。
我查看了那里的解决方案，除了“反序列化”方法（我刚刚开始工作）的 hacky 解决方案之外似乎没有任何工作，这不是一个可扩展的解决方案。我希望有人可以解释如何使用更好的方法。
所以我假设您在某个地方有一个包含方法、属性等的类，并且您希望未序列化的数据成为该类的实例，对吗？我认为这是不可能的，但如果我错了，请纠正我。有一些解决方案，例如：在对象上有一个更新方法 - 基本上你创建一个 Exam 的新实例并用来自 JSON 的数据更新它。很简单，类是匹配的，但它需要一些编码，因为它不会自动发生（这种魔法的一个很好的例子是 PHPs unserialize 函数）。
我记得看到了应该保留方法的库和代码。但是，我浏览了这么多库和解决方案，我不确定哪些是说他们会“保留方法”的库和解决方案。像 serializer.ts (npmjs.com/package/serializer.ts) 这样的解决方案确实需要一些工作来处理嵌套对象等不平凡的事情，但编写完整的反序列化方法（您只需添加注释）的工作要少得多。

标签： javascript json angular typescript

【解决方案1】：

我制作了一个名为json-dry 的小包。它支持（循环）引用和类实例。

你必须定义 2 个类方法（toDry 在原型上，unDry 作为静态方法），注册类，然后就可以了。

我已经使用它多年了，它也能够序列化非常大的集合。

【讨论】：