按下硬件后退按钮上的Cordova角度应用程序，打开上一次打开的视图

Question

最初，我在视图“ A”中，然后从api加载了一些东西。现在，单击按钮时，我移至视图“ B”，然后单击后退按钮（硬件/导航栏后退按钮），移回至视图A，但视图A的内容已被破坏，仅加载了简单视图。 / p>

window.history.back();

因此，我提出了一种方法，即在每次加载视图时，都将其添加到了本地存储状态数组中。然后再按一次，便回到了先前的状态。

this.router.navigate([previousState]);

但这仅在我的导航栏按钮单击时有效。单击硬按钮时，我会返回原位，但状态不再被获取。

我的代码是：

@Injectable()
export class AppStateService {
private menuOpen: boolean = false;
private headerTitle: string = "";
private offlineState: boolean = false;


public constructor(private router: Router) {
    document.addEventListener("backbutton", () => {
        this.back(true);
    }, false);
}

public back(hardwareClick?: boolean): void {

    var routes: string[] = [
        'Login',
        'Main'
    ];
    for (var i of routes) {
        var route = this.router.generate([i]);
        if (this.router.isRouteActive(route)) {
            this.exitApp();
            return;
        }
    }

    var  previousState = CordovaService.getPreviousState();
    this.router.navigate([previousState]);

}

视觉示例：

单击导航栏后退按钮时，从B到A正常工作 可能是什么问题？

Answer 1

您正在尝试解决一个人一个人创建的问题。首先，您不应该在同一个Cordova应用程序上创建多个页面。

这是Best Practices Cordova app development原则中的第一个：

  

1） SPA是您的朋友

     

首先-您的Cordova应用程序应采用SPA   （单页应用程序）设计。松散定义，SPA是   从一个网页请求运行的客户端应用程序。   用户加载一组初始资源（HTML，CSS和JavaScript）   并通过以下方式进行进一步的更新（显示新视图，加载数据）   AJAX。 SPA通常用于更复杂的客户端   应用程序。 GMail就是一个很好的例子。加载GMail后，   邮件视图，编辑和组织都是通过更新DOM完成的   而不是实际离开当前页面以加载全新的页面   一个。

是的，您可能需要编写更多代码，但是您仍可能使用多个JS文件在单个页面中创建视图。多页方法还具有性能损失：

  

即使您选择不使用Cordova，也会创建一个移动应用程序   如果不使用单页架构，则会产生严重的性能   含义。这是因为在页面之间导航将需要   脚本，资产等要重新加载。即使这些资产是   缓存，仍然会有性能问题。