angularjs - 如何在状态更改时更改导航栏模板？

我正在尝试构建一个基于 NG6-starter( https://github.com/AngularClass/NG6-starter ) 的网络应用程序，但我面临一些困难:我需要在不同的状态、“auth”和“store”下使用不同的导航栏模板，但是我不知道该怎么做。应用程序中的每个组件由3个js和1个html表示:

导航栏.js:

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import navbarComponent from './navbar.component';



let navbarModule = angular.module('navbar', [
  uiRouter
])

.component('navbar', navbarComponent);

navbarModule.$inject = ['$scope', '$location', '$rootScope'];
export default navbarModule;

navbar.component.js:

import template from './navbar.html';
import controller from './navbar.controller';
import './navbar.scss';

let navbarComponent = {
  restrict: 'E',
  bindings: {},
  template: template,
  controller,
  controllerAs: 'vm'
};

export default navbarComponent;

和navbar.controller.js:

class NavbarController {
  constructor() {
       this.name = 'navbar';
      }
}

export default NavbarController;

状态定义如下(例如“auth”状态、auth.js):

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import authComponent from './auth.component.js';

let authModule = angular.module('auth', [
  uiRouter
])

  .config(($stateProvider) => {
    "ngInject";
    $stateProvider
      .state('auth', {
        url: '/auth',
        template: '<auth></auth>'
      });
  })

  .component('auth', authComponent);


export default authModule;

索引 html 如下所示:

<body class="" ng-app="app" ng-strict-di ng-cloak>
    <app>
      Loading...
    </app>   
</body>

有没有办法使用uiRouter将模板传递给导航栏？谢谢!

最佳答案

你的 html 会像这样。

<div ui-view="top">

</div>
<div ui-view="bottom">

</div>

状态提供者会喜欢

$stateProvider.
    state('auth', {
            url: '',
            views: {
                'top': {
                    templateUrl: 'navBar.html',
                    controller: navBarController
                },
                'bottom': {
                    templateUrl: 'ViewA.html',
                    controller: ViewAController
                },
                            }
        });
        state('store', {
                url: '',
                views: {
                    'top': {
                        templateUrl: 'navBar2.html',
                        controller: navBar2Controller
                    },
                    'bottom': {
                        templateUrl: 'ViewB.html',
                        controller: ViewBController
                    },
                                }
            });

您可以在索引页上使用多个 ui View 。您可以通过状态更改来更改导航栏。告诉我我是否错过了解释你的问题。这可能对你有帮助

关于angularjs - 如何在状态更改时更改导航栏模板？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37809551/

angularjs - 如何在状态更改时更改导航栏模板？

上一篇：java - TDD 和工厂模式

下一篇：php - Laravel闭包，什么是$query，$query是如何传递的？