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

【问题标题】：How can I save the state of a component after navigating to another component in Angular 8导航到Angular 8中的另一个组件后如何保存组件的状态
【发布时间】：2020-05-08 17:09:02
【问题描述】：

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

【问题讨论】：

保存在本地存储或使用商店
在 LocalStorage 中缓存您的数据，并在组件的 ngOnInit() 上检查数据是否存在于 localstorage 中，如果存在则从那里复制数据
@AnsarSamad 我要保存的值是一个布尔值。 :-(
@Shikha 我要保存的值是一个布尔值。 :-(
可以使用路由数据属性

标签： angular rxjs angular-ui-router components state

【解决方案1】：

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

city.component.html

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

【讨论】：

【解决方案2】：

您应该阅读有关应用程序路由组件的信息。基本上你应该有一个文件app-routing.modul.ts 这里是official angular link。

【讨论】：

我有这个文件。我应该配置什么？我已经配置了路径。