なぜui-routeはstate1をstate2から解決できないのですか？

Question

私は2つのビュー（左側とメニューとコンテンツ）を持つアプリケーションを持っており、モジュールもあります。ユーザーがコンボリストからモジュールを選択すると、$ state.go（）が選択されたモジュール名で呼び出され、それに応じてビューに値が設定されます。以下のコードサンプル。

私はAngular 1.5、ui-routerとtypescriptを使用します。

私がコンボリストからモジュールを選択すると、以下のエラーが表示されます。

Error: Could not resolve 'BFTS' from state 'home'

私はその理由を知りません。私はこの問題を乗り越えるために、これまでにやった

：

• はのparamsは、コンボボックスで適切に通過するかどうかをチェックします。それは正常に動作しています。

• ここで多くの質問とドキュメントを確認しました。受け入れられた回答と比較して私のコードに違いは見られません。

奇妙には、アプリケーションがロードされたとき、私は「自宅モジュール」と私はそれらを期待する「ホームコンテンツ」テキストを見ることができるので、「ホーム」状態は、アクティブである、ということです。

ユーザがモジュールを選択できるコントローラ。

module qa.gonogo { 

    "use strict"; 

    export interface IHeaderComponentController { 

    } 


    export class HeaderComponentController implements IHeaderComponentController { 

     public modules = <IGoNoGoModule[]>[ 
      { 
       name: "BFTS", 
       default: 1 
      }, 
      { 
       name: "Test Execution", 
       default: 0 
      }, 
      { 
       name: "Data Analyzer", 
       default: 0 
      }, 
      { 
       name: "Data Generator", 
       default: 0 
      }, 
      { 
       name: "Build track", 
       default: 0 
      }, 

     ]; 
     public selectedModule = undefined; 

     static $inject = ["moveToStateService"]; 

     constructor(
      private moveToStateService: IMoveToStateService 
     ) { } 

     public $onInit =(): void => { 

     } 

     public moduleSelected(goNoGoModule: IGoNoGoModule): void { 
      console.log('selected: ', goNoGoModule); 

      if (goNoGoModule === null || typeof goNoGoModule === 'undefined') { 
       throw "Desired state name cannot be empty or null! " + goNoGoModule; 
      } 

      this.moveToStateService.moveToState(goNoGoModule.name); 
     } 

    } 

    angular 
     .module("goNoGo") 
     .controller("headerComponentController", qa.gonogo.HeaderComponentController); 

} 

国：状態が変更されます

((): void => { 

    "use strict"; 

    angular 
     .module("goNoGo") 
     .config(config); 

    config.$inject = ["$stateProvider", "$urlRouterProvider"]; 

    function config(
     $stateProvider: ng.ui.IStateProvider, 
     $urlRouterProvider: ng.ui.IUrlRouterProvider 
    ) { 

     $urlRouterProvider.otherwise("/"); 

     $stateProvider 

      .state("home", 
      <ng.ui.IState>{ 
       url: "/", 
       views: <any>{ 
        "leftHandMenu": <ng.ui.IState>{ 
         template: "home module" 
        }, 
        "content": <ng.ui.IState>{ 
         template: "home content" 
        } 
       } 
      }) 

      .state("bfts", 
      <ng.ui.IState>{ 
       url: "/bfts", 
       views: <any>{ 
        "leftHandMenu": <ng.ui.IState>{ 
         template: "bfts module" 
        }, 
        "content": <ng.ui.IState>{ 
         template: "bfts content" 
        } 
       } 
      }) 
    } 

})(); 

サービス：

module qa.gonogo { 

    "use strict"; 

    export interface IMoveToStateService { 
     moveToState(stateName: string): void; 
    } 

    class MoveToStateService implements IMoveToStateService { 

     constructor(
      private $state: ng.ui.IStateService) { 

     } 

     moveToState(stateName: string): void { 
      console.log("state service:", stateName); 
      this.$state.go(stateName, <any>{}); 
     } 
    } 

    factory.$inject = ["$state"]; 

    function factory(
     $state: ng.ui.IStateService 
    ) { 
     return new MoveToStateService($state); 
    } 

    angular 
     .module("goNoGo") 
     .factory("moveToStateService", factory); 

} 

Answer 1

私はコメントに書いたように - あなたは

のような状態を定義しました

.state("bfts", 

UI-ルーティングされたが、その名前に一致する状態を識別することはできませんので、だから、

<a ui-sref="BFTS"> 

は動作しません。しかし、<a ui-sref="bfts">が動作します。