Question

我的申请中有2条路线 - / search / criteria和/ search / results。

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

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

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

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

什么是更好的方法？

Answer 1

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

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

Answer 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() {}
}

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

Angular 2 - 在路由

2 个答案: