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

【问题标题】：Add additional information to route - workaround for TypeScript?向路由添加其他信息 - TypeScript 的解决方法？
【发布时间】：2015-06-25 13:52:37
【问题描述】：

通常我会在路线中添加一些设置。例如：

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

自从我开始使用 TypeScript 和 angularJS 以来，IRouteProvider 的接口给 IRouteProvder 带来了一些限制。 IRoute 接口。 IRoute 接口没有提供任何可以存储我的自定义设置对象的属性。

目前我只能设置 IRoute 接口的预定义属性，例如：

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

angular 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;
    [...]

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

【问题讨论】：

标签： javascript angularjs typescript

【解决方案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 节很有趣，因为它包含完整的详细信息。

【讨论】：

【解决方案2】：

您可以将任意成员添加到对象字面量，它仍然会匹配接口。例如。以下编译正常：

interface I {}

var i: I = { a: 1 };

【讨论】：