导航到 Angular 8 中的另一个组件后，如何保存组件的状态

Question

我有 2 个组件：HomeComponent 和 CityComponent。他们没有任何关系。导航回 HomeComponent 后，当我再次导航到 CityComponent 时，它的状态丢失了。我怎样才能保存状态？有任何想法吗？

Answer 1

您可以使用服务来记住路由之间的状态，因为它们通常是单例的。状态行为主体可以存储一个对象，其中包含您可能想要记住的任何状态，因此每次初始化组件时，您所要做的就是.getValue()从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);
  }

城市.component.html

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