如何在路由更改之间维护视图(控制器）状态

How to maintain view (controller) state between route changes?

本文关键字：视图 控制器 状态 维护 之间 路由      更新时间：2023-09-26

我有一个用AngularJS编写的单页应用程序，并使用ui-router来管理状态转换(路由(。

搜索状态配置如下：

function config($stateProvider) {
  $stateProvider
    .state('social.search', {
      url: '/search',
      templateUrl: 'views/social/search/social-search-view.html',
      controller: 'SocialSearchController',
      controllerAs: 'vm'
    });
}

此视图呈现一个表单，控制器(SocialSearchController(负责获取这些输入，将它们提交到服务并显示结果。结果列表以排名列表的形式显示给用户(如 Google 的搜索结果页(。每个结果都有一个链接，用于转到新状态以显示有关条目的详细信息，例如：

<a ui-sref="social.profile({personId: person.id})">{{person.name}}</a>

social.profile状态用于应用程序的其他部分，因此它不是social.search的子项，它的配置如下：

function config($stateProvider) {
  $stateProvider.state('social.profile', {
    url: '/{personId}',
    templateUrl: 'views/social/profile/social-profile-view.html',
    controller: 'SocialProfileController',
    controllerAs: 'vm'
  });
}

它工作正常，我可以输入我的搜索，获取结果，然后单击以查看有关条目的详细信息。但是，当我点击后退按钮从详细视图转换回搜索视图时，我的输入和搜索结果消失了。我知道这是默认和正确的行为，因为如果不再使用控制器，则无需将控制器保留在内存中。

问题是，在此特定方案中，我希望控制器以某种方式保留在内存中，因此用户无需重新键入查询并发出另一个搜索服务请求。

我可以考虑将搜索状态保存到服务中，并使控制器从中获取其初始状态，类似于缓存服务，仅用于存储最后一个控制器的状态。但是我很容易受到此同步过程中涉及的错误的影响，搜索表单有点复杂，因为它涉及自动完成和标记字段(我制作的自定义指令(，因此同步将至少通过三个"层"：控制器状态、缓存服务、自定义输入。

这是正确的方法吗？我有哪些选择？

我不确定 ui-router 是否在父状态和子状态之间保留控制器和数据，但如果是这种情况，您可以尝试"复制"您的状态。

function config($stateProvider) {
 var socialProfile = {
    url: '/{personId}',
    templateUrl: 'views/social/profile/social-profile-view.html',
    controller: 'SocialProfileController',
    controllerAs: 'vm' } 
  $stateProvider
    .state('social.search', {
      url: '/search',
      templateUrl: 'views/social/search/social-search-view.html',
      controller: 'SocialSearchController',
      controllerAs: 'vm'
    });
    $stateProvider.state("social.search.detail', socialProfile);
    $stateProvider.state('social.profile', socialProfile);  
  }

在"social.search"视图中，你可以有一个特殊的href

。 
<a ui-sref="social.search.detail({personId: person.id})">{{person.name}}</a>

在此配置中，您的社交配置文件是搜索的子状态，但也保持独立状态

相关文章：