从模板 html 到其他页面的离子路由答案

【问题标题】：Ionic route from template html, to other page从模板 html 到其他页面的离子路由
【发布时间】：2017-04-20 21:18:48
【问题描述】：

我想在局部视图tab-suggestion 中创建一个按钮，该按钮指向另一个名为tab-profile 的视图。问题是href="#/tab/profile" 没有做任何事情。选项卡导航中的链接可以正常工作，但 ion-view tab-suggestion 中的按钮不能。

如何使按钮工作以定向到profile？这是我的代码：

//app.js
.state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

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

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

//index.html
<ion-nav-view></ion-nav-view>

//tab-suggestion
<a class="button" ng-if="randomConnection === 'maker'" href="#/tab/profile">Contact</a>

编辑： //tabs.html

  <!-- Dashboard Tab -->
  <ion-tab title="Home" icon-off="ion-home" icon-on="ion-home" href="#/tab/home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>
  <ion-tab title="Suggestie" icon-off="ion-android-bulb" icon-on="ion-android-bulb" href="#/tab/suggestion">
    <ion-nav-view name="tab-suggestion"></ion-nav-view>
  </ion-tab>
  <ion-tab title="Feed" icon-off="ion-arrow-graph-up-right" icon-on="ion-arrow-graph-up-right" href="#/tab/feed">
    <ion-nav-view name="tab-feed"></ion-nav-view>
  </ion-tab>

</ion-tabs>

【问题讨论】：

@Ivaro 是的，我的 tabs.html 使用 href，请参阅我的编辑。
好的，你能去掉ionic2标签并添加ionic标签吗？生病删除我的 cmets 以防止与其他人混淆

标签： cordova ionic-framework angular-ui-router

【解决方案1】：

当点击一个标签时，它是按设计选择的（当您显然触摸它时，Ionic 能够确定现在必须选择此标签）。如果您尝试从当前视图中的按钮路由到另一个选项卡，我建议您编写一个包含以下内容的函数：

function() {
    $state.go('yourstate');
    $ionicTabsDelegate.select(0); //index of the tab to select 
}

$ionicTabsDelegate 允许您以编程方式选择您选择的选项卡。

如果您需要进一步的解释，请告诉我，这是简短的版本，因为我是在手机上打字。 :)

【讨论】：