Свойство класса Persist Angular 5

Question

У меня есть SearchComponent (маршрут: / search) и SearchDetailComponent (маршрут: / search-detail: id).

SearchComponent содержит поле поиска (поле ввода), где я могу ввести любой текст, чтобы начать поиск.

Теперь, после загрузки результатов поиска и перехода на страницу SearchDetail, я хочу сохранить введенный термин поиска в поле поиска.Но только после маршрутизации обратно со страницы сведений.Поэтому, если я возвращаюсь со страницы данных, тот же текст, который я искал, должен находиться в окне поиска.

Поле поиска должно быть пустым при переходе на сайт поиска по любой другой странице.

ИмеетКто-нибудь пример или предложение, как это реализовать?

Answer 1

Вы можете использовать Service или localStorage/Session Storage для сохраняющихся данных.

localStorage и sessionStorage выполняют одно и то же и имеют тот же API, но с sessionStorage даннымисохраняется только до тех пор, пока окно или вкладка не будут закрыты, в то время как при localStorage данные сохраняются до тех пор, пока пользователь вручную не очистит кэш браузера или пока ваше веб-приложение не очистит данные.

Я бы предложил вам перейти к @ ngx-pwa / local-storage Асинхронное локальное хранилище для Angular

Для Angular 5:

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

Зарегистрировать его вВаш RootModule

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 из FormGroup.

Сервис
Создайте сервис и зарегистрируйте его в модуле Angular, а не в компоненте.

Если вы хотите, чтобы экземпляр зависимости был shглобально и совместно используют state во всем приложении, сконфигурируйте его на NgModule.

. Вы можете использовать Subject или BehaviorSubject для этого.

1. Использование субъекта

2. Использование BehaviorSubject