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

Question

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

Answer 1

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

Answer 2

您可以使用服务来记住路由之间的状态，因为它们通常是单例。状态 Behavior Subject 可以存储一个对象，其中包含您可能想要记住的任何状态，因此每次初始化组件时，您所要做的就是通过 .getValue() 从 state$ 中检索当前值服务。此外，当您更新任何状态值时，您应该记得更新存储在服务中的状态。

state.service.ts

@Injectable({
  providedIn: "root"
})
export class StateService {
  state$ = new BehaviorSubject<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>

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

How can I save the state of a component after navigating to another component in Angular 8

angular

rxjs

angular-ui-router

components

state

state.service.ts

city.component.ts

city.component.html