在 Angular 中提交表单后，在不同的组件中显示表单输入数据答案

【问题标题】：Showing form input data in a different component after submitting the form in Angular在 Angular 中提交表单后，在不同的组件中显示表单输入数据
【发布时间】：2020-03-15 00:22:20
【问题描述】：

我已经构建了一个包含表单视图和详细信息视图的员工中心应用程序。填写表格并单击提交后，输入数据应显示在详细信息视图中。我使用 EmployeeService 将数据从表单传输到详细信息组件。问题是数据没有从表单组件传输到详细信息组件。谁能给我一些帮助？这是我的代码-

https://stackblitz.com/edit/angular-bnqqyc

P。 S- 请不要在 STACKBLITZ 中分叉代码

【问题讨论】：

标签： html css node.js angular typescript

【解决方案1】：

您需要使用 BehavioSubject 而不是 Subject 以便新订阅者可以使用最后发出的值（当您的员工详细信息组件被实例化时）。

还应在表单提交处理后不在同一个按钮中执行导航，以便将其移动到 onSubmit() 函数。

查看改进后的 stackblitz 并告诉我您的反馈： https://stackblitz.com/edit/angular-mmqqjk

【讨论】：

非常感谢您，先生。它有效。感谢您的帮助。
接受这种情况下的答案

【解决方案2】：

您需要在服务中使用 BehaviorSubject 而不是 Subject。

当调用 next() 时，Subject 会立即发出。在您的情况下，表单组件在 Subject 上调用 next ，然后导航到 detail 组件，然后 detail 组件订阅 Subject ....但为时已晚 - Subject 已经发出，而您错过了它。

一个 Behavior 主题保存它的最后一个值，并在您订阅它时发出该值。

【讨论】：

【解决方案3】：

您可以创建一个类并将您的数据保存在如下所述的变量中，然后调用.next()。

private messageSource = new BehaviorSubject<any>({});
currentObject = this.messageSource.asObservable();

【讨论】：