角度2-在路由之间传递数据

Question

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

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

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

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

由于搜索执行是在服务中完成的，所以我也可以从onSearch方法调用该服务。但是问题是如何将结果传递给搜索结果组件(这样它就可以在网格中呈现它们)。

什么是更好的方法？

Answer 1

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

例如，您的服务可以如下所示：

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

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

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

    constructor() {}
}

当然，这是一个简单的例子，您需要决定如何在服务中存储数据。

Answer 2

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

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