使用 Ionic 框架在登录/注销时清除历史记录并重新加载页面

Posted 2023-02-19

【中文标题】使用 Ionic 框架在登录/注销时清除历史记录并重新加载页面

【英文标题】：Clear History and Reload Page on Login/Logout Using Ionic Framework

【发布时间】：2014-10-01 06:21:25

【问题描述】：

我是使用 Ionic 开发移动应用程序的新手。在登录和注销时，我需要重新加载页面，以刷新数据，但是，$state.go('mainPage') 将用户带回视图而不重新加载 - 永远不会调用它背后的控制器。

有没有办法在 Ionic 中清除历史并重新加载状态？

【参考方案1】：

欢迎使用框架！实际上，Ionic 中的路由由ui-router 提供支持。您可能应该查看this previous SO question 以找到几种不同的方法来完成此操作。

如果你只想重新加载你可以使用的状态：

$state.go($state.current, , reload: true);

如果您真的想重新加载页面（例如，您想重新引导所有内容），那么您可以使用：

$window.location.reload(true)

祝你好运！

【讨论】：

我想将所有从远程服务器拉取的 css/js 文件打包到 index.html 中。但我宁愿只在发生变化时重新加载这些。我应该如何构建它？

不确定我是否理解你@mylord。你说的是实时重载吗？也许您对此处讨论的 Html5 离线缓存/清单感兴趣：tmkmobile.wordpress.com/2012/03/04/html5-offline-solution 我认为您可能正在尝试做一些事情，而不是问题的初衷。

$state.go($state.current, , reload: true);这个解决方案对我不起作用。

@IamStalker 你能提供任何进一步的信息，或者可能是一个 codepen/fiddle/plunk 作为例子吗？

$state.go($state.current, , reload: true); 在状态定义中如果cache:true（如果缓存被省略，这是默认值）不起作用。在#ionic 1.0.0-RC2 和 1.0.0 中测试。看我的回答。

【参考方案2】：

正确答案：

$window.location.reload(true);

【讨论】：

此答案已被标记为低质量。你能解释一下为什么它是正确的答案吗？

因为它使用$window而不是window

你是对的，如果你使用 .location.reload 语法，那么使用 $window 是有意义的。我已经更改了上面的答案，以便我们对未来的读者保持一致。 $state.go 语法在某些情况下也很有用。

只有这个答案对我有帮助，而不是打勾的那个

我曾经喜欢这种方法，但有人报告说它会在某些设备（android 4.4、Chrome）上导致无限循环重新加载。

【参考方案3】：

我发现 JimTheDev 的答案仅在状态定义设置了 cache:false 时才有效。缓存视图后，如果您要从一种状态导航到缓存但需要刷新的状态，则可以执行 $ionicHistory.clearCache() 和 $state.go('app.fooDestinationView')。

在此处查看我的答案，因为它需要对 Ionic 进行简单更改，并且我创建了一个拉取请求：https://***.com/a/30224972/756177

【讨论】：

好东西。我实际上并没有在我的 ionic 应用程序中使用它，所以我很欣赏缓存功能的后续工作。看起来你的 PR 将进入 1.0.1。一旦发布，我会在我原来的帖子中做一个注释，提醒你并提示人们看看。

【参考方案4】：

我找到了一个帮助我完成它的解决方案。在ion-view 标签上设置cache-view="false" 解决了我的问题。

<ion-view cache-view="false" view-title="My Title!">
  ....
</ion-view>

【讨论】：

禁用缓存视图会显着降低性能，您应该避免使用此选项。相反，您可以处理 ionicView 事件。见：***.com/questions/25192172/…

@ezain，请告诉我性能如何受到影响？

@Rajeshwar，当缓存系统启用时，Ionic 会隐藏视图生成的所有 DOM，当视图发生更改时，您无需重新计算 DOM。如果您有一个沉重的 DOM，并且您需要在所有过渡更改中生成它，那么您可以欣赏过渡动画中的滞后。如果您禁用缓存的唯一原因是重新加载控制器，请使用 ionicView 事件。

@ezain，有很多方法可以实现禁用缓存的功能。我几乎尝试了所有这些，对我没有任何作用。而这个给了我我需要的东西。而且我在加载该页面时没有看到任何明显的滞后，即使该页面有点大。所以我更喜欢这种方式而不是其他方式。

【参考方案5】：

当我看到网站时，我试图使用 angularjs 刷新页面，但没有代码适用于该代码，然后我得到了使用重新加载页面的解决方案

$state.go('path',null,reload:true);

在一个可行的函数中使用它。

【参考方案6】：

重新加载页面不是最好的方法。

您可以处理状态更改事件以重新加载数据，而无需重新加载视图本身。

在此处了解 ionicView 生命周期：

http://blog.ionic.io/navigating-the-changes/

并处理 beforeEnter 事件以重新加载数据。

$scope.$on('$ionicView.beforeEnter', function()
  // Any thing you can think of
);

【讨论】：

这似乎是最好的方法。

具体来说，您可以检查状态是否来自缓存，如果是，请调用您的一些 API 来刷新它：$scope.$on('$ionicView.beforeEnter', function(scopes, states) if (states.fromCache) ...

@jakub.g 如果您不想缓存视图，您可以禁用此特定视图的缓存，更简单。

【参考方案7】：

我需要重新加载状态才能使滚动条工作。当通过另一个州 - “注册”时，他们没有工作。如果应用程序在注册后被强制关闭并再次打开，即直接进入“主”状态，滚动条就会起作用。上述解决方案均无效。

注册后的时候，我换了：

$state.go("home");

与

window.location = "index.html"; 

应用重新加载，滚动条正常工作。

【参考方案8】：

我尝试了很多方法，但发现这个方法是绝对正确的：

$window.location.reload();

希望这可以帮助其他人像我一样坚持使用以下版本：angular 1.5.5、ionic 1.2.4、angular-ui-router 1.0.0

【参考方案9】：

在我的情况下，我只需要清除视图并重新启动控制器。我可以通过这个 sn-p 了解我的意图：

$ionicHistory.clearCache([$state.current.name]).then(function() 
  $state.reload();

缓存仍在工作，似乎只是清除了视图。

ionic --version 表示 1.7.5。

【讨论】：

附录：当状态有参数时，必须在视图/状态标识中定义。检查此粘贴箱：pastebin.com/2CaGYpnz

代码中的错误 更正版本 $ionicHistory.clearCache([$state.current.name]).then(function() $state.reload(); );

只是少了一个括号

【参考方案10】：

控制器只被调用一次，你应该保留这个逻辑模型，我通常做的是：

我创建了一个方法$scope.reload(params)

在这个方法的开始，我调用$ionicLoading.show(template:..) 来显示我的自定义微调器

当可能重新加载过程完成时，我可以调用$ionicLoading.hide() 作为回调

最后，在 REFRESH 按钮内，我添加了ng-click = "reload(params)"

此解决方案的唯一缺点是您丢失了离子导航历史系统

希望这会有所帮助！

【参考方案11】：

上述解决方案均不适用于与localhost 不同的主机名！

我必须将 notify: false 添加到传递给 $state.go 的选项列表中，以避免在调用 $window.location.reload 之前调用 Angular 更改侦听器。最终代码如下：

$state.go('home', , reload: true, notify: false);

>>> 编辑 - 根据您的浏览器，可能需要 $timeout >>>

$timeout(function () $window.location.reload(true); , 100);

更多信息请访问ui-router reference。

【参考方案12】：

如果您想在视图更改后重新加载，则需要

$state.reload('state',reload:true);

如果你想让那个视图成为新的“根”，你可以告诉 ionic 下一个视图它将是根

 $ionicHistory.nextViewOptions( historyRoot: true );
 $state.go('app.xxx');
 return;

如果您想让控制器在每次视​​图更改后重新加载

app.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) 

$ionicConfigProvider.views.maxCache(0);

【参考方案13】：

.state(url: '/url', 控制器: Ctl, templateUrl: 'template.html', 缓存: false) cache: false ==> 解决了我的问题！

【参考方案14】：

正如@ezain 所指出的，仅在必要时才重新加载控制器。在更改状态时更新数据而不是重新加载控制器的另一种更简洁的方法是使用广播事件并在需要更新视图数据的控制器中侦听此类事件。

示例：在您的登录/注销功能中，您可以执行以下操作：

$scope.login = function()
    //After login logic then send a broadcast
    $rootScope.$broadcast("user-logged-in");
    $state.go("mainPage");
;
$scope.logout = function()
   //After logout logic then send a broadcast
   $rootScope.$broadcast("user-logged-out");
   $state.go("mainPage");
;

现在在您的 mainPage 控制器中，通过使用 $on 函数在 mainPage 控制器中监听广播来触发视图中的更改，如下所示：

$scope.$on("user-logged-in", function()
     //update mainPage view data here eg. $scope.username = 'John';
);

$scope.$on("user-logged-out", function()
    //update mainPage view data here eg. $scope.username = '';
);