ES5中的Angular 2路由? [英] Angular 2 routing in ES5?

问题描述

Angular 2 ES5 备忘单 说要这样做:

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

但是，我不知道如何在该类上指定 @Component 内容，以便我可以实际实例化它.例如，

However, I can't figure out how to specify the @Component stuff on that class so that I can actually instantiate it. For example,

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

抛出异常，因为 .RouteConfig 的结果没有 .Component 方法.同样，.Component 的结果没有 .RouteConfig 方法.你是如何设置这个的?

throws an exception because the result of .RouteConfig doesn't have a .Component method. Similarly, the result of .Component doesn't have a .RouteConfig method. How do you get this set up?

推荐答案

我已经做了以下似乎工作得很好的方法.

I've done the following way which seems to work well.

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 都是装饰器，您可以编写:

Since both ng.core.Component and ng.router.RouteConfig are decorators you can write:

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

希望有所帮助.

这篇关于ES5中的Angular 2路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！