Question

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

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

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

错误：无法解决＆＃39; BFTS＆＃39;来自州＆＃39; home＆＃39;

我不知道为什么。

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

检查params是否会在组合框中正确通过。它工作正常。
我在这里查看了很多问题和文档。与接受的答案相比，我的代码看不出任何差异。

奇怪的是，当应用程序加载到“家”时，状态是活跃的，因为我可以看到＆＃34;家庭模块＆＃34;和＆＃34;家庭内容＆＃34;我希望他们的文本。

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

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">会有用。

为什么ui-route无法从state2解析state1？

1 个答案: