Angular 2 ES5 组件路由

Question

我将尝试使用ES5实现Angular 2路由。以下是appComponent。

(function(app) {
  app.AppComponent =function() {};
  app.AppComponent = ng.core
    .Component({
      selector: 'my-app'
    }).
    View({
        templateUrl: 'app.html',
        directives: [ng.router.ROUTER_DIRECTIVES]
    })
    .Class({
      constructor: function() {
          this.name = "pankaj Badukale";
      }
    });

    **ng.router.RouteConfig([
        {
            path: "login",
            component: app.LoginComponent,
            as: "login"
        }
    ]);**

})(window.app || (window.app = {}));

app.html

<h1>
    {{name}}  
    <a [routerLink]="['/login']">Home</a>
    <router-outlet></router-outlet>
</h1>

我想知道如何在组件上配置路由。

我搜索了很多，但人们只是定义了视图、组件和类。

有人有想法吗？

- Pankaj Badukale

---

请看一下这个解决方案，它可能会有所帮助。http://stackoverflow.com/questions/34604160/angular-2-routing-in-es5 - Vamsi

很抱歉，但是在 Angular 2 的 Beta.0 版本中语法已经发生了变化，这意味着一些更高级的语法出现了。因此，我期望得到针对此版本的答案。目前正在库中寻找相关内容。 - Pankaj Badukale

Answer 1

组件和RouteConfig都是装饰器，在angular 2(beta)中，你可以像这样编写装饰器：

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

这是你的工作副本...

(function(app) {
  app.AppComponent =function() {};
  app.AppComponent = ng.core
    .Component({
      selector: 'my-app'
    }).
    View({
        templateUrl: 'app.html',
        directives: [ng.router.ROUTER_DIRECTIVES]
    })
    .Class({
      constructor: function() {
          this.name = "pankaj Badukale";
      }
    });

    app.AppComponent = ng.router.RouteConfig([
        {
            path: "login",
            component: app.LoginComponent,
            as: "login"
        }
    ])(app.AppComponent);

})(window.app || (window.app = {}));

- rykhan