Угловая 2 маршрутизация в ES5?

Question

Angular 2 ES5 cheat sheet говорит, чтобы сделать это:

var MyComponent = ng.router.RouteConfig([ 
    { path: '/:myParam', component: MyComponent, as: 'MyCmp' }, 
    { path: '/staticPath', component: ..., as: ...}, 
    { path: '/*wildCardParam', component: ..., as: ...} 
]).Class({ 
    constructor: function() {} 
}); 

Однако, я не могу понять, как определить @Component материал на этом классе, так что я могу на самом деле его экземпляр. Например,

ng.router.RouteConfig([...]).Component({}) 

генерирует исключение, так как результат .RouteConfig не имеет метод .Component. Аналогичным образом, результат .Component не имеет метода .RouteConfig. Как вы это настроили?

Answer 1

Я сделал следующий способ, который, кажется, работает хорошо.

app.AppComponent = ng.core 
    .Component({ 
     selector: 'the-app', 
     template: ` 
      <h1>App!!!</h1> 
      <a [routerLink]="['Children']">Children</a> 
      <a [routerLink]="['Lists']">Lists</a> 
      <router-outlet></router-outlet> 
     `, 
     directives:[ 
      app.ListsComponent, 
      app.ChildrenComponent, 
      ng.router.ROUTER_DIRECTIVES 
     ] 
    }) 
    .Class({ 
     constructor: [ng.router.Route, function(_router) { 
      this._router = _router; // use for navigation, etc 
     }] 
    }); 
app.AppComponent = ng.router 
    .RouteConfig([ 
     { path: '/', component:app.ListsComponent, name:'Lists' }, 
     { path: '/children', component:app.ChildrenComponent, name:'Children' } 
    ])(app.AppComponent); 

Так как ng.core.Component и ng.router.RouteConfig являются декораторы вы можете написать:

app.AppComponent = ng.core.Class(...); 
app.AppComponent = ng.core.Component(...)(app.AppComponent); 
app.AppComponent = ng.router.RouteConfig(...)(app.AppComponent); 

Надежда, что помогает.

Answer 2

Вот возможный способ, которым мне удалось наконец работать. Я открыт для других, предлагающих лучшие решения:

app.AppComponent = ng.core 
    .Class({ 
     constructor: [ 
      function() { 
      } 
     ] 
    }); 

app.AppComponent.annotations = [ 
    ng.router.RouteConfig([ 
     { path: '/', component:app.ListsComponent, name:'Lists' }, 
     { path: '/children', component:app.ChildrenComponent, name:'Children' } 
    ]).annotations[0], 

    new ng.core.ComponentMetadata({ 
     selector: 'the-app', 
     template: '<h1>App!!!</h1>' + 
     '<a [routerLink]="[\'Children\']">Children</a>' + 
     '<a [routerLink]="[\'Lists\']">Lists</a>' + 
     '<router-outlet></router-outlet>', 
     directives:[ 
      app.ListsComponent, 
      app.ChildrenComponent, 
      ng.router.ROUTER_DIRECTIVES 
     ] 
    }) 
];