Angular UI路由器中不同选项卡的相同html页面答案

【问题标题】：Same html page for different tabs in Angular UI RouterAngular UI路由器中不同选项卡的相同html页面
【发布时间】：2016-11-27 21:16:28
【问题描述】：

我的 Angular 应用程序路由如下：

$stateProvider

  // setup an abstract state for the tabs directive
  .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:

  .state('tab.dotnet', {
      url: '/dotnet',
      views: {
          'tab-dotnet': {
              templateUrl: 'templates/tab-dotnet.html',
              controller: 'QuestionsCtrl'
          }
      }
  })

  .state('tab.sql', {
      url: '/sql',
      views: {
          'tab-sql': {
              templateUrl: 'templates/tab-sql.html',
              controller: 'QuestionsCtrl'
          }
      }
  })

以上两个路由使用相同的控制器但不同的html页面。由于两个页面相同，我希望在我的应用程序中有一个 html 页面，而不是两个不同的 tab-sql 和 tab-dotnet 页面。但是在选择选项卡时，我需要将一个微分变量注入到控制器中。基本上我需要这样的东西：

  .state('tab.dotnet', {
      url: '/dotnet',
      views: {
          'tab-dotnet': {
              templateUrl: 'templates/tab.html',
              controller: 'QuestionsCtrl',
              type: 'dotnet' // so that i get this type in my Controller
          }
      }
  })

  .state('tab.sql', {
      url: '/sql',
      views: {
          'tab-sql': {
              templateUrl: 'templates/tab.html',
              controller: 'QuestionsCtrl',
              type: 'sql'
          }
      }
  })

如何做到这一点？

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

您可以使用resolve 将数据传递给处于某个状态的控制器。

  .state('tab.dotnet', {
      url: '/dotnet',
      views: {
          'tab-dotnet': {
              templateUrl: 'templates/tab.html',
              controller: 'QuestionsCtrl',
              resolve: {
                  type: 'dotnet';
              }
          }
      }
  })

  .state('tab.sql', {
      url: '/sql',
      views: {
          'tab-sql': {
              templateUrl: 'templates/tab.html',
              controller: 'QuestionsCtrl',
              resolve: {
                  type: 'sql';
              }
          }
      }
  })

https://github.com/angular-ui/ui-router/wiki#resolve

【讨论】：