angular - 如何保存搜索查询并将其显示在新组件上？

Question

我创建了一个名为保存搜索的新页面。使用保存按钮，我希望能够发送输入的日期以显示在新页面上。因此，一旦我单击按钮，它们就会显示在那里。

到目前为止我做了什么？我可以输入日期范围，当我单击保存按钮时，我可以看到它们已登录到控制台。

我在寻找什么？我想在新页面上显示保存并记录到控制台的日期。这样做的过程是什么？我希望能够将记录的控制台数据显示到新页面上。

如果任何人都可以将我重定向到他们，视频示例将很有用，如果不是书面解决方案也可以。

新搜索屏幕用于在此处创建搜索我可以使用日期范围选择器创建搜索以根据出生日期和收到日期查看列表:

第一张图片 = 保存的搜索屏幕我想显示从新搜索中保存并显示在控制台中的搜索条目。

从新搜索屏幕记录到控制台的查询:

fromDateReceived: Wed Apr 01 2020 13:24:24 GMT+0100 (British Summer Time) {}
toDateReceived: Sun Apr 05 2020 13:24:24 GMT+0100 (British Summer Time) {}
fromDateOfBirth: Mon Apr 06 2020 13:24:24 GMT+0100 (British Summer Time) {}
toDateOfBirth: Wed Apr 08 2020 13:24:24 GMT+0100 (British Summer Time) {}

目前使用 onSubmit 来捕获 searchcomponent.ts 中的查询:

onSubmit() {
    console.log(this.searchForm.value);
    this.savedsearchService.savedsearch(this.searchForm.value)
    .subscribe(
      response => console.log('Successful', response),
      error => console.error('Error', error)
    );
  }

以下是 saved.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class SavedSearchService {

  url = 'http://localhost:4200/ui/savedSearch';
  constructor(private http: HttpClient) { }

  savedsearch(searchData) {
    return this.http.post<any>(this.url, searchData);
  }
}

Answer 1

首先，您可以将日期存储在本地存储中。
第二，它在 SavedSearchService 中创建一个 Subject。

有一个关于 stackblitz 的小例子(不是我的):link