返回上一页后，Angular 9如何保持组件状态？

问题描述

我是Angular的新手。我正在使用路由器切换屏幕。.

this._router.navigate(['a_page'],{state: {data: moredata})

并像这样在a_page构造函数中获取状态

this._router.getCurrentNavigation().extras.state;

但是，如果我从a_page返回，然后使用浏览器前进按钮前进，则extras.state为null。我不知道如何以最佳方式做到这一点，请提出想法。谢谢。

解决方法

您可以使用打字稿访问器setter and getter获得所需的结果。

在您设置并获取值的地方创建服务。

state.service.ts

import { Injectable } from '@angular/core';

@Injectable({
 providedIn: 'root'
})
export class SomeService {
 _state;

 get state() {
  return this._state;
 }

 set state(data) {
  this._state = data
 }
}

获取和设置可以通过任何组件实现

export class StateComponent {
 // inject state service to access set get methods
 constructor(private service: StateService) {
  this.service.state =  { data: moredata }; // setting state

  console.log(this.service.state); // getting state from anywhere 
}

希望这行得通。

,

您可以通过Subject使用Singleton服务，以在组件之间共享数据（不需要状态管理库）。

使用angular-cli创建服务：ng generate service service-name

将服务注入需要共享相同数据的组件的构造函数中：

constructor(private service: MyService) {}

在您的服务中，声明一个负责保存数据的主题（BehaviorSubject是一个好主意，因为它使用值进行了初始化）：

data: BehaviorSubject<any> = new BehaviorSubject<any>('foo');

要从某个组件更改其值，请在其上使用next()方法：

constructor(private service: MyService) {}

update(): void {
  this.service.data.next('bar');
}

然后，为了获取任何组件（或服务/指令...）中的最后一个值，请订阅BehaviorSubject并使用该值做您想做的一切：

constructor(private service: MyService) {}

ngOnInit(): void {
  this.service.data.subscribe(value => {
  // do whatever
  });
}

每次在应用程序中的某个地方使用next()方法时，其他地方的任何订阅都将获得此新值。