应用程序/ app.ts

module myModule{
class MyConfig {
    constructor( private $stateProvider:ng.ui.IStateProvider,private $urlRouterProvider:angular.ui.IUrlRouterProvider ) {
        this.init();
    }

    private init():void {
        this.$stateProvider.state( 'home',{
                abstract:true,template: '<main></main>',url: '/'
            }).state('home.main',{
                views: {
                    'lhp@home': { template: '<lhp></lhp>' },'rhs@home': { template: '<rhs></rhs>' }
                },url: '/main',});

        this.$urlRouterProvider.otherwise('/main');
    }
}

let myApp = angular.module( 'myModule',['ui.router'] );
myApp.config(['$stateProvider','$urlRouterProvider',($stateProvider,$urlRouterProvider) => {
    return new MyConfig($stateProvider,$urlRouterProvider);
}]);

}

main指令是一个简单的div,它是两个命名视图的容器

main.html中/ main.controller.ts

module app.Controllers {
    export class MainController {
        constructor( private $log:ng.ILogService ) {
            this.Init();
        }

        private Init() {
            this.$log.info('Main Controller');
        }

    }

    angular.module('myModule').controller( 'mainController',['$log',MainController] );
}

应用/组件/ main.html中

<div>
    <div id="wrap">
        <div id="left_col" ui-view="lhp"></div>
        <div id="right_col" ui-view="rhs"></div>
    </div>
</div>

应用/组件/ main.directive.ts

module app.Directives {
    'use strict';
    export class MainDirective implements ng.IDirective {
        public templateUrl:string = 'components/main.html';
        public restrict:string = 'E';
        public controller:string = 'mainController';
        public scope = {};

        constructor(private $log:ng.ILogService) {
            this.$log.info('main directive');
        }

        public static Factory() {
            return (log:ng.ILogService) => {
                return new MainDirective(log);
            };
        }
    }

    angular.module('myModule').directive('main',app.Directives.MainDirective.Factory()]);
}

应用/组件/ lhp.controller.ts

module app.Controllers {
    export class LhpController {
        constructor( private $log:ng.ILogService ) {
            this.Init();
        }

        private Init() {
            this.$log.info('LHP Controller');
        }
    }

    angular.module('myModule').controller( 'lhpController',LhpController] );
}

应用/组件/ lhp.html

<div style="width: inherit">
    THIS IS A TEST
</div>

应用/组件/ lhp.directive.ts

module app.Directives {
    'use strict';
    export class LhpDirective implements  ng.IDirective {
        public templateUrl:string = 'components/lhp.html';
        public restrict:string = 'E';
        public controller:string = 'lhpController';
        public controllerAs:string = 'lctrl';
        public scope = {};

        constructor(private $log:ng.ILogService) {
            this.$log.info('lhp directive');
        }

        public static Factory() {
            return (log:ng.ILogService) => {
                return new LhpDirective(log);
            };
        }
    }

    angular.module('myModule').directive('lhp',app.Directives.LhpDirective.Factory()]);
}

视图rhs的设置与lhp完全相同.我已经确认了两个rhs,并且lhp指令通过使home状态非抽象并将它们作为模板加载来正常工作.两者都正确呈现.当我做家庭状态摘要是我遇到问题.主控制器更不用说html根本不加载.打字稿和抽象视图有问题吗？有没有人遇到过类似问题和嵌套的命名视图？我在互联网上搜索了类似的例子,但找不到任何相关内容.我发现的最接近的例子是：How can I add ui-router stateProvider configuration to my application with Typescript?,它显示了一个抽象视图应该可以使用typescript,但是示例没有填写详细信息.我是否遗漏了嵌套命名视图的内容以使用typescript？

任何帮助将不胜感激.