javascript - 向路由添加其他信息 - TypeScript 的解决方法？

Question

通常我会在 route 进行一些设置。例如:

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

自从我开始使用 TypeScript 和 angularJS 以来，IRouteProvider 的接口(interface)带来了一些关于 IRouteProvder 顺便说一句的限制。 IRoute 接口(interface)。 IRoute 接口(interface)不提供任何我可以存储自定义设置对象的属性。

目前我只能设置 IRoute 接口(interface)的预定义属性，例如:

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

angular js ng-route接口(interface)定义为:

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 的新接口(interface)。声明路由时，将路由定义转换为新接口(interface)。

定义一个新接口(interface):

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

将路由转换定义为新接口(interface):

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到有关强制转换为有用接口(interface)的相关问题。这是一段引述:

An interface in TypeScript is a compile-time only construct, with no run-time representation. You might find section 7 of the TypeScript specification interesting to read as it has the complete details.