离子用户界面路由器不适用于子视图答案

【问题标题】：Ionic UI Router not working for child view离子用户界面路由器不适用于子视图
【发布时间】：2017-06-07 03:58:02
【问题描述】：

我正在尝试创建一个非常简单的 Lookbook 应用程序。然而，我似乎无法找到上班的路线。我尝试了this question 的答案来调试路由。控制台中没有出现任何内容。

我正在尝试创建一个应用程序，用户可以在其中看到页面上的多个外观，然后可以导航到相应的详细信息页面。如果 Ionic 也能识别出详细信息页面是外观手册页面的子页面，那就太好了。从而在菜单栏中显示后退按钮。

app.config 路由设置代码：

$stateProvider

  //Lookbook view
  .state('lookbook', {
    url: '/lookbook',
    views: {
      'main': {
        templateUrl: 'templates/lookbook.html',
        controller: function () {
          console.log('Lookbook controller loaded!');
        }
      }
    }
  })

  // Details view
  .state('lookbook.brand-shirt', {
    url: '/lookbook/brand-shirt',
    views: {
      'main': {
        templateUrl: 'templates/brand/shirt.html',
        controller: function () {
          console.log('Details controller loaded!');
        }
      }
    }
  });

$urlRouterProvider.otherwise('/lookbook');

index.html<body> 内容：

  <ion-nav-bar class="bar-stable">
    <ion-nav-back-button>
    </ion-nav-back-button>

    <ion-nav-title>
      <img class="logo" alt="Lookbook Logo" ng-src="assets/images/icons/logo.svg">
    </ion-nav-title>
  </ion-nav-bar>

  <ion-nav-view name="main">
  </ion-nav-view>

lookbook 页面出现。但是当我导航到/lookbook/brand-shirt 时，它会恢复为/lookbook。我错过了什么？

【问题讨论】：

标签： ionic-framework angular-ui-router

【解决方案1】：

在该路由中，brand-shirt 状态是lookbook 状态(lookbook.brand-shirt) 的子状态，因为您不想在lookbook 视图中加载详细信息，因此不需要那样做.

 $stateProvider

  //Lookbook view
    .state('lookbook', {
    url: '/lookbook',
    views: {
      'main': {
        templateUrl: 'templates/lookbook.html',
        controller: function() {
          console.log('Lookbook controller loaded!');
        }
      }
    }
  })

  // Details view
  .state('brand-shirt', {
    url: '/lookbook/brand-shirt',
    views: {
      'main': {
        templateUrl: 'templates/brand/shirt.html',
        controller: function() {
          console.log('Details controller loaded!');
        }
      }
    }
  });

  $urlRouterProvider.otherwise('/lookbook');

就那样做吧。并且历史记录将保持不变，因为您在 'main' ion-nav-view 中推送视图。所以在你的应用程序开始时/lookbook 被加载到main 中，当你转到brand-shirt 时，新视图在main 视图堆栈中的上方。如果您返回，您将删除详细信息视图并返回到lookbook。

CodePen

【讨论】：

您的解决方案有效，但没有子状态我无法通过 ui-router resolve 重用父级解析的参数
您可以将对象作为参数发送到子状态或使用服务来处理对象的保存和获取。