时间戳

首页 > 解决方案 > 如何保存搜索查询并将其显示在新组件上？

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

问题描述

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

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

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

如果有人可以将我重定向到他们，视频示例将很有用，如果没有书面解决方案就可以了。

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

已保存的搜索屏幕 我想显示保存在新搜索中并显示在控制台中的搜索条目

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

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

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);
  }
}

标签： angularangular8

解决方案

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

有一个关于 stackblitz 的小例子（不是我的）：链接

推荐阅读