Angular 2 - 在路由之间传递数据答案

【问题标题】：Angular 2 - passing data between routesAngular 2 - 在路由之间传递数据
【发布时间】：2017-06-05 15:46:49
【问题描述】：

我的应用程序中有 2 条路线 - /search/criteria 和 /search/results。

在搜索条件组件中，用户填写搜索条件并点击搜索按钮。此按钮调用一个函数 (onSearch)，表单值作为输入传递。然后它将用户路由到搜索结果组件。

onSearch(formValues) {
 console.log(formValues);
 this.router.navigate(['/search/results']);
}

如何将 formValues（包含用户输入的搜索条件的 Javascript 对象）传递给搜索结果组件？在搜索结果组件中，我将执行搜索（使用服务）并在网格中向用户显示结果。

由于搜索执行是在服务中完成的，我也可以从 onSearch 方法调用该服务。但接下来的问题是如何将结果传递给搜索结果组件（以便它可以在网格中呈现它们）。

什么是更好的方法？

【问题讨论】：

Angular 2: sharing data across different routes的可能重复

标签： angular

【解决方案1】：

由于您的数据是一个对象，您可以使用本地存储或共享服务来传输它。

您可以从这里了解如何使用共享服务：https://stackoverflow.com/a/35479148/6835976

【讨论】：

【解决方案2】：

我建议创建类似 DataStorageService 的东西，您可以在其中将所需的数据存储在搜索条件组件中，然后从需要的服务中提取数据。

您的服务可能如下所示：

import { Injectable } from "@angular/core";

@Injectable()
export class DataStorageService {
    public storage: any;

    get isEmpty(): boolean {
        return this.storage === null || this.storage === undefined;
    }

    constructor() {}
}

当然，这是一个简单的示例，您需要确定您真正希望如何在服务中存储数据。

【讨论】：