Question

我正在尝试在Angular 2中实现一个简单的搜索引擎。我有一个带有搜索字段的组件和一个结果列表，这些结果导致在搜索字段下方的外部URL（不属于应用程序的页面）。

假设用户输入一些搜索文本，在后台获取服务调用的结果，然后单击其中一个结果链接，将他带到外部站点。然后他可能会决定尝试其他一些结果，所以他点击浏览器的Back按钮返回搜索结果。但问题是，此时整个应用程序都重新初始化，这意味着之前的结果已经消失，应用程序只显示一个空的搜索字段，就好像它是第一次打开一样。

所以，我的问题是：如何跨导航到外部网站保留应用程序的状态？我是否必须使用路由器并将搜索字符串存储在路由中？或者我必须以某种方式保存状态并在用户返回应用程序时恢复它？处理此用例的推荐方法是什么？

Answer 1

如果我理解正确，那么当您从角度应用程序（例如http://your-angular-app.com）导航到外部/外来网站（例如http://alien-site.com）时，您需要将网页数据重新显示为左侧单击浏览器的“后退”按钮，导航回到您的角度应用程序（http：.. your-angular-app.com）。

如果是这样，我可以想到两种可能性

使用 HTML5 localStorage

假设您的html页面上有一个类似于以下内容的输入元素

<input [(ngModel)]="fieldModel1"></input>

您的组件是

export class YourComponent implements OnInit {
  public fieldModel1;

  @HostListener('window:beforeunload', ['$event'])
   unloadNotification($event: any) {
    localStorage.setItem('fieldName1',this.fieldModel1)
    // and so on ...
  }

  constructor() {}

  // your code ....
}

在页面加载时，您可以从本地存储中获取值并填充屏幕

ngOnInit() {
   if(localStorage.getItem('fieldName1')) {
     this.fieldModel = localStorage.getItem('fieldName1');
   }
   // and so on ...
}

在页面卸载时将表单数据发布到服务器，并在页面加载时获取它-通常使用服务器而不是localStorage

Answer 2

您可以将状态存储在localstorage中。例如，如果您进行搜索，则可以导航到这样的网址。

yourdomain.com/search?query=string

这将代表Angular 2中的路线，此路线将进行搜索。然后使用查询作为键并存储该键的状态（结果）。如果再次导航到该URL，则可以使用该密钥从localstorage加载状态。当然，您需要处理清除旧结果，但这是详细信息。

Angular 2：如何跨导航到外部页面保持应用程序的状态？

2 个答案: