对于Angular 5：

Question

我有一个SearchComponent（路由：/搜索）和SearchDetailComponent（路由：/ search-detail：id）。

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

现在，在加载搜索结果并导航到SearchDetail页面后，我想将我输入的搜索词保存到搜索框中。但是从详细信息页面返回后，仅。因此，如果我从详细页面导航回来，我搜索的相同文本应该在搜索框中。

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

有没有人举例说明如何实施？

Answer 1

您可以使用Service或localStorage/Session Storage来保留数据。

localStorage和sessionStorage完成相同的操作并使用相同的API，但使用sessionStorage时，数据仅在窗口或制表符关闭时保留，而{{1}数据一直存在，直到用户手动清除浏览器缓存或直到您的Web应用程序清除数据为止。

我建议你去Angular的@ngx-pwa/local-storage异步本地存储

对于Angular 5：

localStorage

在RootModule中注册

npm install @ngx-pwa/local-storage@5

注入并使用

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

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

<强>用法

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

@Injectable()
export class YourService {

  constructor(protected localStorage: LocalStorage) {}

}

在您来回导航之后，只需使用以下方法let user: User = { firstName: 'Henri', lastName: 'Bergson' }; this.localStorage.setItem('user', user).subscribe(() => {});和setValue()之一设置/修补值，两者都会设置patchValue() form control中的值。

<强>服务
创建服务并在Angular模块而不是组件中注册它。

如果您希望全局共享依赖项实例并在整个应用程序中共享FormGroup，请在state

上配置它

您可以使用NgModule.或Subject来完成此操作。

<强> Using Subject
<强> Using BehaviorSubject

坚持类属性Angular 5

1 个答案:

对于Angular 5：