angular-ui-router 使用打字稿嵌套命名视图

Posted 2023-03-13

【中文标题】angular-ui-router 使用打字稿嵌套命名视图

【英文标题】：angular-ui-router nested named views with typescript

【发布时间】：2016-06-03 07:03:46

【问题描述】：

您好，我是 typescript 的新手，对 angular 的经验很少。我一直在尝试使用 typescript 获得一个非常常见的 angular-ui-router 设置，但我就是不知道我缺少什么。我有两个嵌套的命名视图，似乎根本没有加载。

app/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);
]);

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

ma​​in.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] );

app/components/main.html

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

app/components/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', ['$log', app.Directives.MainDirective.Factory()]);

app/components/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', ['$log', LhpController] );

app/components/lhp.html

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

app/components/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', ['$log', app.Directives.LhpDirective.Factory()]);

视图 rhs 的设置与 lhp 完全相同。我已经确认 rhs 和 lhp 指令都可以正常工作，方法是使主状态非抽象并将它们加载为模板。两者都正确渲染。当我使家庭状态抽象时，就是我遇到问题的时候。主控制器更不用说 html 根本不加载。打字稿和抽象视图有问题吗？有没有人遇到过打字稿和嵌套命名视图的类似问题？我在互联网上搜索了类似的例子，但找不到任何相关的东西。我发现的最接近的例子是：How can I add ui-router stateProvider configuration to my application with Typescript?，它显示了一个抽象视图应该可以用打字稿，但这个例子没有填写细节。我是否缺少嵌套命名视图与打字稿一起使用的东西？

任何帮助将不胜感激。

【参考方案1】：

我的同事发现了这个问题。这是一个超级简单的修复。这个问题是由我的抽象视图中有一个 url 字段引起的：

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

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