Angular 9如何在返回前一页后保留组件状态？

Question

我是Angular的新手。我正在使用Router来切换屏幕... 就像这样

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

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

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

但是，如果我从a_page返回，然后使用浏览器的前进按钮，extras.state将为null。我不知道最好的方法是什么，请提出建议。谢谢。

- Sabish.M

---

你应该尝试探索ngRx或任何状态管理库。 - programoholic

使用状态管理库是好的，还是有其他标准方法？ - Sabish.M

如果数据量很小，比如id这样的小块数据，可以尝试使用localStorge。但是如果数据量很大，最好选择状态管理库。 - programoholic

如果你愿意，我可以给你一个例子。 - Kamran Khatti

@KamranKhatti 你能分享一些示例链接吗？ - Sabish.M

Answer 1

你可以使用TypeScript访问器设置器和获取器来实现所需的结果。

创建一个服务，在其中设置和获取值。

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
 }
}

get和set可以从任何组件中实现

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 
}

希望这个有效。

- Kamran Khatti

Answer 2

你可以使用带有Subject的单例服务来在组件之间共享数据（不需要使用状态管理库）。

使用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()方法时，其他地方的任何订阅都会获得这个新值。

- Gérôme Grignon