Как сохранить состояние компонента после перехода к другому компоненту в Angular 8

Question

У меня есть 2 компонента: HomeComponent и CityComponent. Они не имеют никаких отношений. После перехода обратно к HomeComponent состояние CityComponent теряется при повторном переходе к нему. Как я могу сохранить состояние? Есть идеи?

Answer 1

Вы можете использовать сервисы для запоминания состояний между маршрутами, потому что они обычно одиночные. Субъект поведения состояния может хранить объект, который содержит любые состояния, которые вы, возможно, захотите запомнить для себя, поэтому при каждой инициализации компонента все, что вам нужно сделать, это извлечь текущее значение на .getValue() из state$ в службе. Кроме того, при обновлении любого значения состояния следует помнить об обновлении состояния, хранящегося в службе.

state.service.ts

@Injectable({
  providedIn: "root"
})
export class StateService {
  state$ = new BehaviourSubject<any>(null);
}

city.component.ts

export class CityComponent implements OnInit {
  constructor(private stateService: StateService) {}
  state: any;
  ngOnInit() {
    this.state = this.stateService.state$.getValue() || {};
  }

  updateFoo(val: any) {
    this.state.foo = val;
    this.stateService.state$.next(state);
  }

city.component. html

<p>{{state.foo}}</p>

Answer 2

Вы должны прочитать о компонентах маршрутизации приложений. В основном у вас должен быть файл app-routing.modul.ts, вот официальная ссылка angular .