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

Question

I am trying to build a web-app based on NG6-starter( https://github.com/AngularClass/NG6-starter ) and I am facing some difficulties: I need to use different templates for navbar in different states, 'auth' and 'store', but I cannot figure out how to do it. 我正在尝试基于NG6-starter（ https://github.com/AngularClass/NG6-starter ）构建一个Web应用程序，但我遇到了一些困难：我需要为处于不同状态的导航栏使用不同的模板，和“商店”，但我不知道该怎么做。 Each component in the app is represented by 3 js and 1 html: 应用程序中的每个组件都由3个js和1个html表示：

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

and navbar.controller.js: 和navbar.controller.js：

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

export default NavbarController;

States are defined as following(eg 'auth' state, auth.js): 状态定义如下（例如，“ 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;

Index html looks like this: 索引html看起来像这样：

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

Is there any way to use uiRouter to pass the template to navbar? 有什么方法可以使用uiRouter将模板传递给navbar？ Thank you! 谢谢！

Answer 1

your html will be like. 您的html会像。

<div ui-view="top">

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

</div>

state provider will like 国家提供者会喜欢

$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
                    },
                                }
            });

you can use multiple ui-views on your index page. 您可以在索引页面上使用多个ui视图。 you can change your nav bar with state change . 您可以通过状态更改来更改导航栏。 tell me if i have miss interpreted your question. 告诉我我是否想念您的问题。 this might help you 这可能对您有帮助

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-06-15 17:28:15

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-06-15 17:28:15

解决方案1
3 已采纳 2016-06-15 17:28:15