Javascript 为什么ui路由无法从状态2解析状态1？

我有一个应用程序有两个视图（lefthandmenu和content），它也有模块。当用户从组合列表中选择模块时，将使用所选模块名调用$state.go（），并相应地填充视图。下面是代码示例

我使用Angular 1.5、ui路由器和typescript

当我从组合列表中选择模块时，应用程序抛出下面的错误

错误：无法从状态“主”解析“BFTS”

我不知道为什么

到目前为止，我是如何克服这个问题的：

• 检查组合框中的参数是否正确传递。它工作得很好

• 我在这里检查了很多问题和文档。与公认的答案相比，我看不出我的代码有什么不同

奇怪的是，当应用程序加载时，“主页”状态处于活动状态，因为我可以在预期的位置看到“主页模块”和“主页内容”文本

用户可以在其中选择模块的控制器

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);

}

模块qa.gonogo{
“严格使用”；
导出接口IHeaderComponentController{
}
导出类HeaderComponentController实现IHeaderComponentController{
公共模块=[
{
名称：“BFTS”，
默认值：1
},
{
名称：“测试执行”，
默认值：0
},
{
名称：“数据分析器”，
默认值：0
},
{
名称：“数据生成器”，
默认值：0
},
{
名称：“建造轨道”，
默认值：0
},
];
公共选择模块=未定义；
静态$inject=[“moveToStateService”]；
建造师(
私有移动状态服务：IMoveToStateService
) { }
public$onInit=（）：void=>{
}
已选择公共模块（goNoGoModule:IGoNoGoModule）：无效{
log（'selected:'，goNoGoModule）；
if（goNoGoModule===null | | goNoGoModule的类型===‘未定义’）{
抛出“所需状态名称不能为空或null！”+goNoGoModule；
}
this.moveToStateService.moveToState（goNoGoModule.name）；
}
}
有棱角的
.模块（“goNoGo”）
.控制器（“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"
                    }
                }
            })
    }

})();

（（）：void=>{
“严格使用”；
有棱角的
.模块（“goNoGo”）
.config（config）；
config.$inject=[“$stateProvider”，“$urlRouterProvider”]；
函数配置(
$stateProvider:ng.ui.IStateProvider，
$urlRouterProvider:ng.ui.IUrlRouterProvider
) {
$urlRouterProvider。否则（“/”）；
$stateProvider
.州（“家”，
{
网址：“/”，
观点：{
“leftHandMenu”：{
模板：“主模块”
},
“内容”：{
模板：“主页内容”
}
}
})
.州（“bfts”，
{
url:“/bfts”，
观点：{
“leftHandMenu”：{
模板：“bfts模块”
},
“内容”：{
模板：“bfts内容”
}
}
})
}
})();

将更改状态的服务：

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);

}

模块qa.gonogo{
“严格使用”；
导出接口IMoveToStateService{
moveToState（stateName:string）：void；
}
类MoveToStateService实现IMOVetStateService{
建造师(
私有$state:ng.ui.IStateService）{
}
moveToState（stateName:string）：无效{
log（“状态服务：”，stateName）；
this.$state.go（stateName，{}）；
}
}
工厂。$inject=[“$state”]；
功能工厂(
$state:ng.ui.IStateService
) {
返回新的MoveToStateService（$state）；
}
有棱角的
.模块（“goNoGo”）
.工厂（“移动状态服务”，工厂）；
}

正如我在评论中所写，您定义了如下状态

.state("bfts",

所以

---

将不起作用，因为ui routed无法识别与该名称匹配的状态。但是

会起作用。

可能是因为州名是

bfts

，而不是

bfts

？你是对的：D请在下面写一个答案，我会接受的！谢谢，我已经发布了我的答案（为将来有同样问题的用户提供更多描述）

<a ui-sref="BFTS">