Question

我正在尝试构建一个基于NG6-starter（https://github.com/AngularClass/NG6-starter）的网络应用程序，我遇到了一些困难：我需要在不同的州使用不同的导航栏模板，＆＃39; auth＆＃39 ;和＆＃39;存储＆＃39;，但我无法弄清楚如何做到这一点。应用程序中的每个组件都由3个js和1个html表示：

navbar.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;

国家定义如下（例如，＆＃39; auth＆＃39; state，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将模板传递给导航栏？谢谢！

Answer 1

你的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-views。您可以通过状态更改来更改导航栏。告诉我，如果我错过了解释你的问题。这可能对你有帮助

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

1 个答案: