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

Question

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

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

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

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

但如果我从a_page返回，然后使用浏览器转发按钮转发，则extras.state为null。我不知道如何以最好的方式做到这一点，请提出这个想法。非常感谢。

Answer 1

您可以使用typescript访问器setter和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 
}

希望这能奏效。

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