Question

通常我会将一些设置放入我的路线中。例如：

              .when('Products', {
                templateUrl: 'App/Products.html',
                settings: {
                    showbuy: true,
                    showexport: true,
                    Description: "Product List"
                },[...]

自从我开始使用TypeScript和angularJS以来，IRouteProvider的界面带来了一些关于IRouteProvder btw的限制。 IRoute界面。 IRoute界面不提供我可以存储自定义设置对象的任何属性。

目前我只能设置IRoute界面的预定义属性，如：

app.config([
            <any>'$routeProvider', function routes($routeProvider: ng.route.IRouteProvider) { $routeProvider
                    .when('/Product',
                    {
                         templateUrl: 'App/Products.html',
                         controller:'someController'
                         [...]
                    })

角度js ng-route接口定义为：

interface IRouteProvider extends IServiceProvider {     
    otherwise(params: IRoute): IRouteProvider;
    when(path: string, route: IRoute): IRouteProvider;
}
/**
 * see http://docs.angularjs.org/api/ngRoute/provider/$routeProvider#when    for API documentation
 */
interface IRoute {
    /**
     * {(string|function()=}
     * Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.
     */
    controller?: string|Function;
    /**
     * A controller alias name. If present the controller will be published to scope under the controllerAs name.
     */
    controllerAs?: string;
    /**
     * Undocumented?
     */
    name?: string;
    [...]

所以我问自己，是否存在将自定义对象保存到每个已定义路径的解决方法。

Answer 1

一种方法是定义扩展ng.route.IRoute的新接口。声明路由时，将路由定义强制转换为新接口。

定义新界面：

export interface IPageTitleRoute extends ng.route.IRoute {
    pageTitle: string;
}

将路线投射定义为新界面：

angular.module('App').config(['$routeProvider',
    function routes($routeProvider: ng.route.IRouteProvider) {
        $routeProvider
            .when('/', <IPageTitleRoute> {
                controller: App.Controllers.HomeController,
                controllerAs: 'vm',
                templateUrl: './views/app/home.html',
                pageTitle: 'Home'
            })
            .otherwise('/');
    }
]);

在适当的位置利用新属性（例如$ routeChangeSuccess）：

angular.module('App').run(['$rootScope', '$location',
    function($rootScope: ng.IRootScopeService, $location: ng.ILocationService) {
        $rootScope.$on('$routeChangeSuccess',
            function(event: ng.IAngularEvent, current: IPageTitleRoute, previous: ng.route.IRoute) {
                $rootScope['pageTitle'] = current.pageTitle;
            }
        );
    }
]);

我发现this answer有关关于转换为有用接口的相关问题。这是一个引用：

TypeScript中的接口是仅编译时的构造，没有运行时表示。您可能会发现TypeScript规范的第7部分很有趣，因为它具有完整的详细信息。

Answer 2

您可以将任意成员添加到对象文字中，它仍将与界面匹配。例如。以下编译好：

interface I {}

var i: I = { a: 1 };

添加其他信息以进行路由 - TypeScript的解决方法？

2 个答案: