javascript - 为什么 ui-route 不能从 state2 解析 state1？

Question

我有一个有两个 View (lefthandmenu 和内容)的应用程序，它也有模块。当用户从组合列表中选择模块时，将使用所选模块名称调用 $state.go() 并相应地填充 View 。下面的代码示例。

我使用 Angular 1.5、ui-router 和 typescript。

当我从组合列表中选择一个模块时，应用会抛出以下错误。

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

我不知道为什么。

到目前为止我做了什么来解决这个问题:

• 检查参数是否会在组合框中正确传递。它工作正常。

• 我在这里检查了很多问题和文档。与接受的答案相比，我看不出我的代码有任何差异。

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

Controller ，用户可以在其中选择模块。

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",

所以

<a ui-sref="BFTS">

将不起作用，因为 ui-routed 无法识别与该名称匹配的状态。但是<a ui-sref="bfts">将工作。