javascript - 如何使用 ui-router 包含不同的导航面板

Question

我的 AngularJS 应用程序有两个部分，需要单独的导航栏:

• 专利

  • 专利导航栏:列出专利、添加专利

• 交易

  • 交易导航栏:当前交易、交易历史

我已阅读How to attach navbar only on certain pages using ui-router? ，您可以在其中使用 View ，但这是在状态中包含 templateUrl ，我在组件中声明了我的 templateUrl ，如下所示:

$stateProvider
.state('patents', {
   url: '/patents',
   component: 'patents',
})

angular.module('myApp').component('patents', {
    bindings: { patents: '<' },
    templateUrl: '../templates/patents/list/list-patents.htm'
});

问题

在 ui-router 中使用组件时，在模板/状态中包含不同导航的最佳方法是什么？如果答案很简单，我们深表歉意。

Answer 1

方法一

通过ng-include在您的模板中:

<div ng-include="'link/to/template.html'"></div>

<小时/>

方法2

更动态地，您可以创建自定义 <navigation>组件，它通过 $stateParam 设置正确的模板.

路由器:

.state('patents', {
    url         : '/patents',
    component   : 'patents',
    params      : {
        navigation  : 'custom'
    }
})

然后，在您的导航组件中，您可以使用

template    : function($stateParams) {
    var navigation = $stateParam.navigation || 'default';
    return '<div ng-include="\''link/to/' + navigation + '.html'\'"></div>
},

所以你只需设置 param当该页面有自定义导航时，在您的路由器中。

确保包含 <navigation>在每一页上。

<小时/>

方法3

如果您不想包含 <navigation>在每个页面上，您还可以使用以下方法创建一个导航菜单(就像您现在可能拥有的那样)，并添加一个 Controller

app.controller('NavigationCtrl', function($rootScope, $state) {
    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
        this.navigation = toParams.navigation;
    });
})

您可以捕获toParams在每次路线更新时，并使用它来动态更改模板:

导航模板:

<div class="nav" ng-controller="NavigationCtrl as $ctrl">

    <div ng-if="$ctrl.navigation === 'default'">
        // Include default
    </div>

    <div ng-if="$ctrl.navigation === 'custom'">
        // Include custom
    </div>

</div>