状態の変更でnavbarテンプレートを変更するには？

私はNG6スターター（https://github.com/AngularClass/NG6-starter）に基づいてWebアプリケーションを構築しようとしていますが、いくつかの問題に直面しています。異なる州のnavbarに異なるテンプレートを使用する必要があります。どのようにそれを行う。状態の変更でnavbarテンプレートを変更するには？

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をアプリで各コンポーネントは3つのJS 1つのHTMLで表されます。

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

export default NavbarController;

状態は、次のように定義されます（例： 'auth' 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を使用する方法はありますか？ありがとうございました！

出典

2016-06-14 boooni

あなたのhtmlはようになります。

<div ui-view="top"> 

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

</div>

状態プロバイダは、あなたのインデックスページに複数のUI-のビューを使用することができます

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

を好きになるでしょう。あなたは状態変化であなたのナビゲーションバーを変えることができます。あなたの質問を解釈するのに間違っているかどうか教えてください。これはあなたの

出典

2016-06-15 17:28:15

おかげで、 – boooni

その私にplnkr @AniketPandya –

@HimeshSuthar私のために働いていない:) –

状態の変更でnavbarテンプレートを変更するには？

答えて

関連する問題