Angular 将文件内容传递到角度7中的NGRX效果

我的组件中包含以下HTML/Angular：

文件
上传JSON文件

组件的TS文件具有：

@Output（）uploadFile=neweventemitter（）；
_上传文件（）{
这个.uploadFile.emit（）；
}

模块TS文件：

uploadFile（）{
this.store.dispatch（new PageActions.UploadFile（））；
}

操作文件：

导出类上载文件实现操作{
只读类型=PageActionTypes.UploadFile；
构造函数（公共有效负载：文件）{}
}

效果文件：

@Effect（）
uploadFile$：Observable=此.actions$.pipe(
类型（PACtions.PageActionTypes.UploadFile），
映射（action=>action.payload），
// ...
);

我试图弄清楚如何通过使用FileReader的操作从组件中获取文件的内容（或文件）。上传的文件将是一个有效的JSON文件，我需要从该文件中获取JSON

---

我想我需要在组件中执行

.emit（）

，但不确定。

要获取JSON文件的内容，需要使用FileReader

下面是它的一个简单实现

<div class="block">
  <label id="lbl">File </label>
  <input #fileInput type='file' (change)="onChange($event)"/>
  <button class="btn btn-sm"  (click)="uploadFile()">Upload The JSON File</button>
</div>

这是一本书

此外，您不应该使用

File

作为有效负载的输入，因为我们实际上已经解析了文件内容。您可以使用其他一些自定义界面来定义上载数据的类型

export class UploadFile implements Action {
  readonly type = PageActionTypes.UploadFile;
  constructor(public payload: any) { }
}

---

为什么要读取文件内容？您能告诉我更多信息吗？将JSON恢复到存储状态是一项要求。作为一项要求，我需要用户在浏览后单击一个上载按钮。@cdub嗨，实际上并不像看上去那么复杂。上传文件后，我们可以将数据存储在component类中的属性上。单击按钮后，我们可以访问属性，并分派将接受对象作为参数的操作。让我更新我的答案。@cdub实现我的解决方案是否成功？JSON实际上是在给定点下载的应用程序状态。上传后，我需要应用程序使用JSON并将其放入商店，使应用程序返回到该状态。这是如何实现的？我相信我需要一个减速机和一个刷新。@cdub减速机就是你所需要的！这将是更新您的状态

export class UploadFile implements Action {
  readonly type = PageActionTypes.UploadFile;
  constructor(public payload: any) { }
}