2

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ただし、実際にインスタンス化できるように、そのクラスのものを指定する方法がわかりません。例えば、

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

の結果にメソッド.RouteConfigがないため、例外がスローされます。.Component同様に、の結果にはメソッド.Componentがありません.RouteConfig。これをどのようにセットアップしますか？

4

2 に答える 2

6

私はうまくいくと思われる次の方法を行いました。

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);

それが役立つことを願っています。

于 2016-01-07T04:02:02.500 に答える
1

これが、私が最終的に機能するようになった可能性のある方法です。私は他の人がより良い解決策を投稿することにオープンです：

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
      ]
  })
];
于 2016-01-05T05:11:55.223 に答える