Angular定位服务：如何判断"back"和"forward"导航是否可用

Question

在我的 PWA 中，当应用程序处于独立模式时，我正在实现后退和前进导航按钮。为此，我在我的组件中注入 Location service 然后：

public onForward() {
 this.location.forward();
}

public onBack() {
  this.location.back();
}

我现在要做的是在没有可用的前进导航时禁用前进按钮，同样在没有可用的后退导航时禁用后退按钮（例如，应用程序刚刚启动）。知道如何实现这一目标吗？位置 API 似乎无法满足此要求。

Answer 1

是的，从 API 文档看来确实很清楚。

你可以简单地自己用一个计数器来跟踪：

private history_depth = 0;

public onForward() {
  this.history_depth -= 1;
  this.location.forward();
}

public onBack() {
  this.history_depth += 1;
  this.location.back();
}

public isBackEnabled() {
  return this.history_depth > 0;
}

编辑:

然而，它并不完美：通过浏览器手动返回将不起作用。这在 this SO post 中进行了解释（tldr；不可能，因为这会是一个安全问题），建议启用后退按钮 - 如果没有后退历史记录，这是一个空操作。

此外，也许 the history API 可以解决一些问题。它不会是完美的，但也许有一些案例可以成功解决。您可以在上述 SO post.

的各种答案中查看示例

Angular定位服务：如何判断"back"和"forward"导航是否可用

Angular Location service: how to determine if "back" and "forward" navigation are available

angular

angular-router