如何防止特定的 $state 在另一个 $state 更新时刷新

Question

https://plnkr.co/edit/bOZW1a9u62W1QA6cYjYj?p=preview

预期

在 Login 之后所有 $states 初始化，然后在点击 Ticker 按钮后，唯一应该重新初始化的 $states 是 ticker 、tags 和 social，但不是 feed。

结果

在 登录 之后，所有 $states 初始化，然后在单击 Ticker 按钮后，所有 $states 重新初始化。 feed 不应该。

应如何构建仪表板和提要模块以防止出现这种情况？目前我在 dashboard.html 中有 <feed-module></feed-module>。它和仪表板是否应该在另一个中间 state/component 中进一步分开？也许 container.component？

完整代码

// Feed module
////////////////////////////////////////////////////////////////////////////////
var feed = angular.module('feed', ['ui.router'])

feed.config(function($stateProvider) {
  
  const feed = {
    name: 'feed',
    url: '/feed',
    templateUrl: '<em>Feed items go here.</em>'
  }
  
  $stateProvider.state(feed);
  
})

feed.component('feedModule', {
  templateUrl: 'feed-module-template.html',
  controller: function($scope, $state) {
    console.log('Feed init (only once)', $state.params);
  }
})

// RouterApp module
////////////////////////////////////////////////////////////////////////////////
var routerApp = angular.module('routerApp', ['ui.router', 'feed']);

routerApp.config(function($stateProvider, $urlRouterProvider) {
    
    $urlRouterProvider.otherwise('/login');

    const login = {
      name: 'login',
      url: '/login',
      templateUrl: 'login.html',
      bindToController: true,
      controllerAs: 'l',
      controller: function($state) {
        this.login = function() {
          $state.go('dashboard', {});
        }
      }
    }

    const dashboard = {
      name: 'dashboard',
      url: '/dashboard',
      params: {
        ticker: {},
        tags: {}
      },
      views: {
        '' : {
          templateUrl: 'dashboard.html',
        },
        'tickers@dashboard': {
          templateUrl: 'tickers-module-template.html',
          controller: function($scope, $state) {
            console.log('Tickers init', $state.params);
        
            $scope.tickers = [
              { id: 1, ticker: 'AAPL' },
              { id: 2, ticker: 'GOOG' },
              { id: 3, ticker: 'TWTR' }
            ];
            
            $scope.clickTicker = function(ticker) {
              console.log(' ')
              console.log('Ticker clicked!')
              $state.go('dashboard', { ticker: ticker });
            }
          }
        },
        'tags@dashboard' : {
          templateUrl: 'tags-module-template.html',
          controller: function($scope, $state) {
            const tags_model = [
              {
                ticker: 'AAPL',
                tags : [{ id: 1, term: 'iPhone 7' }, { id: 2, term: 'iPhone 8' }, { id: 3, term: 'Tim Cook' }]
              },
              {
                ticker: 'GOOG',
                tags : [{ id: 4, term: 'Pixel' }, { id: 5, term: 'Pixel XL' }, { id: 6, term: 'Chrome Book' }]
              },
              {
                ticker: 'TWTR',
                tags : [{ id: 7, term: 'tweet' }, { id: 8, term: 'retweet' }, { id: 9, term: 'moments' }]
              }
            ];
            
            function matchTags(ticker, model) {
              return model.filter(function(obj){
                if (obj.ticker === ticker) { return obj; }
              });
            }
            
            $scope.tags_model = matchTags($state.params.ticker.ticker, tags_model)[0];
            
            $scope.clickTag = function(tag) {
              $state.go('tags', { tag: tag });
            }
            
            console.log('Tags init', $state.params);
            // console.log(' Tags model', tags_model);
          }
        },
        'social@dashboard' : {
          templateUrl: 'social-module-template.html', 
          controller: function($state) {
            console.log('Social init', $state.params);
          }
        }
      }
    }

    $stateProvider
      .state(login)
      .state(dashboard);
});

想一想，这样的架构可行吗？基本上 login 会导航到 container 状态，该状态将包含 2 个组件（dashboard 和 feed），每个组件都有自己的内部状态？

Answer 1

我可以根据您来自哪个州来解决此问题。基于您只希望在加载仪表板时加载提要 'once' 的事实，我正在检查先前状态的名称，如果它不是仪表板，那么我将继续执行控制器代码的其余部分。这是 plunker。请注意，如果添加更多状态并且如果其他人有更好的方法，这不是非常可扩展的方法，我真的很想看到。

我修改了控制器代码如下：

feed.component('feedModule', {
  templateUrl: 'feed-module-template.html',
  controller: function($scope, $state) {
    var previousState = $state.params.previousState.name;
    if(previousState !== 'dashboard') {
      console.log('Feed init (only once)', $state.params); //do whatever u want here
    }
  }
});

我将以前的状态作为参数传递给其他状态，如下所示：

controller: function($state) {
  this.login = function() {
    $state.go('dashboard', {previousState : { name : $state.current.name }})
  }
}

查看完整的 plunker here 看看这对您的情况是否有帮助！

如何防止特定的 $state 在另一个 $state 更新时刷新

How to prevent specific $state from refreshing when another $state updates

javascript

state

state-machine

angularjs

angular-ui-router

预期

结果