javascript - Angular uiRouter 重新加载模板中的每个组件

Question

我使用 UIrouter 来定义我的应用程序路由和 View 。

现在出现的问题是，每次我转到路线时，UIRouter 都会重新加载“正在进行的”路线规则中定义的每个 View ，甚至是那些未从旧路线更改的 View 。这会导致 Controller 重置并让我生气。我不想在我的通用模板中对这些 View 进行编码，并且我会避免使用手册 <ng-include ng-if="blah"> ，那么还有其他解决办法吗？

这是我的路线配置。正如您所看到的，两条路线的景色完全相同。 请记住，左 View 、中 View 和右 View 放置在 home.html 内，它被分配给“home”规则。

$stateProvider
    .state('home', {
      templateUrl: 'app/components/templates/home.html',
      abstract: true,
      views: {
          'header': {
              templateUrl: 'app/components/header/headerView.html'
          },
          '': {
              templateUrl: 'app/components/templates/home.html'
          }
      }
    })
  .state('home.twitter', {
        url: '/home/twitter',
        views:{
            'left': {
                templateUrl : 'app/components/accountList/accountListView.html'
            },
            'center': {
                templateUrl : 'app/components/timeline/timelineView.html'
            },
            'right': {
                templateUrl : 'app/components/accountWallet/accountWalletView.html'
            }
        }
    })
      .state('home.link', {
        url: '/home/link',
        views:{
            'left': {
                templateUrl : 'app/components/accountList/accountListView.html'
            },
            'center': {
                templateUrl : 'app/components/timeline/timelineView.html'
            },
            'right': {
                templateUrl : 'app/components/accountWallet/accountWalletView.html'
            }
        }
    });

Answer 1

假设 left 和 right 仅在这两个状态之间共享，并且对于 home 的其他子级可能不同，您需要另一个抽象层以使它们与中心 View 分开:

  $stateProvider
  .state('home', {
    url: '/home'
    templateUrl: 'app/components/templates/home.html',
    abstract: true,
    views: {
        'header': {
            templateUrl: 'app/components/header/headerView.html'
        },
        '': {
            templateUrl: 'app/components/templates/home.html'
        }
    }
  })
  .state('home.account', {
    url: '',
    abstract: true,
    views:{
        'left': {
            templateUrl : 'app/components/accountList/accountListView.html'
        },
        'center': {
            templateUrl : '<ui-view/>'
        },
        'right': {
            templateUrl : 'app/components/accountWallet/accountWalletView.html'
        }
    }
  })
  .state('home.account.twitter', {
    url: '/twitter',
    views:{
        'center': {
            templateUrl : 'app/components/timeline/timelineView.html'
        }
    }
  })
  .state('home.account.link', {
    url: '/link',
    views:{
        'center': {
            templateUrl : 'app/components/timeline/timelineView.html'
        }
    }
  });

当您从 home.account.twitter 转到 home.account.link 时，左 View 和右 View 应保持相同。也就是说，如果您实际上可以将 left 和 right View 集成到父抽象状态中，而不是为它们单独设置一个状态，那么显然会更好。