组件通信 |后退和前进浏览器按钮 |恢复 history.state 有效载荷

Posted 2023-02-23

【中文标题】组件通信 |后退和前进浏览器按钮 |恢复 history.state 有效载荷

【英文标题】：Component Communication | Back and Forward Browser Buttons | Restore history.state payload

【发布时间】：2020-03-06 19:34:54

【问题描述】：

问题

在将有效负载数据放入历史记录以将其移交给另一个组件时，使用浏览器的后退和前进按钮会丢失数据。

我实现了自己的解决方案来恢复以前的有效负载数据。

我的解决方案

// some.component.ts
//
// navigate and set payload in arbitrary component

this.router.navigate(['/course/create'], 
  state:  payload: cid 
);

// app.component.ts
//
// restore payload on using Back and Forward buttons

private historyStateCache = [];

ngOnInit() 
  this.router.events.subscribe((event: Event) => 
    if (event instanceof NavigationStart) 

      // SAVE CURRENT HISTORY

      const state = JSON.parse(
        JSON.stringify(this.router.getCurrentNavigation().extras.state  || )
       );
      this.historyStateCache[event.id] = state;

      // PROCESS BACK AND FORWARD BUTTONS

      if (event.restoredState) 
        const targetId = event.restoredState.navigationId;  
        this.router.getCurrentNavigation().extras.state = this.historyStateCache[targetId];

        // SAVE CURRENT HISTORY

        const stateX = JSON.parse(
          JSON.stringify(this.router.getCurrentNavigation().extras.state)
        );
        this.historyStateCache[event.id] = stateX;

      
    

问题

我不确定这是否是“正确”的 Angular 方式？我是 Angular 的新手，这个解决方案感觉更像是一个 hack。

【问题讨论】：

Angular 不提供浏览器历史记录......所以要得到它，我们必须做 hack。

***.com/questions/35446955/how-to-go-back-last-page

【参考方案1】：

根据 *** 授予我的权力，我特此声明我的上述解决方案作为答案，因为这种黑客攻击方式似乎在 Angular 8 中是合理的。