javascript - Legg til tilleggsinformasjon til rute - løsning for TypeScript?

vanligvis legger jeg noen innstillinger inn i ruten min. For eksempel:

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

Siden jeg begynte med TypeScript og AngularJS, medfører grensesnittet til IRouteProvider noen begrensninger når det gjelder IRouteProvider for øvrig i forhold til IRoute-grensesnittet. IRoute-grensesnittet gir ingen egenskaper hvor jeg kunne lagre mitt egendefinerte innstillingsobjekt.

Akkurat nå kan jeg bare sette de forhåndsdefinerte egenskapene til IRoute-grensesnittet som:

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

AngularJS ng-route-grensesnittet er definert som:

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

Så jeg spurte meg selv om det finnes en løsning for å lagre et tilpasset objekt til hver definerte rute.

Svar #1

En tilnærming er å definere et nytt grensesnitt som utvider ng.route.IRoute. Når ruten erklæres, kaste rutedefinisjonen som det nye grensesnittet.

Definer et nytt grensesnitt:

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

Definer rutekasting som det nye grensesnittet:

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('/');
    }
]);

Utnytt den nye egenskapen på passende steder (som $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;
            }
        );
    }
]);

Jeg fant dette svaret på et relatert spørsmål angående casting til et grensesnitt nyttig. Her er et sitat:

Et interface i TypeScript er en konstruksjon som kun eksisterer under kompilering, uten noen representasjon under kjøring. Du kan finne seksjon 7 i TypeScript-spesifikasjonen interessant å lese, da den har alle detaljene.

Svar #2

Du kan legge til vilkårlige medlemmer i et objektliteral, og det vil fortsatt samsvare med grensesnittet. For eksempel kompilerer følgende fint:

interface I {}

var i: I = { a: 1 };

Relaterte artikler