Angular 持久化类属性5

我有一个SearchComponent（路线：/search）和SearchDetailComponent（路线：/SearchDetail:id）

SearchComponent包含一个搜索框（输入字段），我可以在其中键入任何文本以开始搜索

现在，在加载搜索结果并导航到SearchDetail页面后，我想将键入的搜索词保存到searchbox中。 但是仅在从详细信息页面返回后。所以，如果我从detai页面返回，我搜索的文本应该在搜索框中

通过任何其他页面导航到搜索站点时，搜索框应为空

---

是否有人提供了如何实现该功能的示例或建议？

您可以使用

服务

或

本地存储/会话存储

来持久化数据

localStorage

和

sessionStorage

完成了完全相同的任务，并且具有相同的API，但是使用

sessionStorage

数据仅在关闭窗口或选项卡之前保持，使用

localStorage

时，数据会一直保留，直到用户手动清除浏览器缓存或您的web应用程序清除数据为止

我建议您选择异步本地存储

对于角度5： 在您的根模块中注册它

import { LocalStorageModule } from '@ngx-pwa/local-storage';

@NgModule({
  imports: [
    BrowserModule,
    LocalStorageModule,
    ...
  ]

let user: User = { firstName: 'Henri', lastName: 'Bergson' };

this.localStorage.setItem('user', user).subscribe(() => {});

注入并使用它

import { LocalStorage } from '@ngx-pwa/local-storage';

@Injectable()
export class YourService {

  constructor(protected localStorage: LocalStorage) {}

}

用法

import { LocalStorageModule } from '@ngx-pwa/local-storage';

@NgModule({
  imports: [
    BrowserModule,
    LocalStorageModule,
    ...
  ]

let user: User = { firstName: 'Henri', lastName: 'Bergson' };

this.localStorage.setItem('user', user).subscribe(() => {});

在来回导航后，只需使用以下方法之一设置/修补值

setValue（）

和

patchValue（）

都在

FormGroup

的

表单控件中设置值

服务

创建服务并将其注册到角度模块而不是组件中

如果希望全局共享依赖项的实例，并在整个应用程序中共享
状态
，请在
NgModule上配置它。

您可以使用
Subject
或
BehaviorSubject
来完成它