Question

我有搜索按钮。当出现结果时，我打开其中一个结果，然后单击“后退”按钮，搜索结果消失。

我已经尝试根据搜索获取值。

clientFilter(event) {
const val = event.target.value.toLowerCase();
// filter our data
const temp = this.temp.filter(function(d) {
  return d.clientName.toLowerCase().indexOf(val) !== -1 || !val;
});
// update the rows
this.rows = temp;
this.table.offset = 0;
}

我想要我之前搜索过的值。

Answer 1

这似乎很容易接受，但是当您掌握了它时，这真的很容易。在底部，我提供了一个可行的示例，您可以在其中进行搜索，然后单击go to more info链接并向后导航以查找仍然存在的搜索查询。

所以我猜您正在使用角形铣刨机。

在这种情况下，我建议使用url参数。您的routing.module.ts内部看起来像这样：

{path: 'yourComponent/:search', component: YourComponent },
{path: 'yourComponent', component: YourComponent },

之后，您可以通过这种方式获取url参数（我将其放在ngOnInit函数中）：

ngOnInit() {
  // Extract search parameter
  this.searchTerm = this.route.snapshot.paramMap.get('search');
}

并将其分配给变量，以便我们可以将其用于输入值，在这种情况下，它看起来像：

<input type="text" placeholder="Search..." [value]="searchTerm" (keydown)="searchFor($event.target.value)" >

您可以看到有一个keydown事件侦听器。在真实的应用程序中，我会将其通过主题进行反跳处理（了解更多信息here，但如果您不感兴趣，也不必担心）。

我的searchFor函数如下所示：

public searchFor(term: string): void {
  // Update the search term
  this.searchTerm = term;
  // Replace the current url
  this.location.replaceState(`home/${term}`); 

  // Do some filtering and displaying that list

}

现在，如果您离开该组件，则只需按“后退”按钮，它将导航回到您的url和这一行（我之前已经向您显示过）：

this.searchTerm = this.route.snapshot.paramMap.get('search');

将设置传递的值。

这还有一个令人愉快的副作用，您可以在搜索时共享链接，打开链接的接收者将获得完全相同的结果！

工作Stackblitz

如何获取以前的搜索结果？

1 个答案: