[英]Angular 2 routing in ES5?
The Angular 2 ES5 cheat sheet says to do this: 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() {}
});
However, I can't figure out how to specify the @Component
stuff on that class so that I can actually instantiate it. 但是,我无法弄清楚如何在该类上指定
@Component
内容,以便我可以实际实例化它。 For example, 例如,
ng.router.RouteConfig([...]).Component({})
throws an exception because the result of .RouteConfig
doesn't have a .Component
method. 抛出异常,因为
.RouteConfig
的结果没有.Component
方法。 Similarly, the result of .Component
doesn't have a .RouteConfig
method. 同样,
.Component
的结果没有.RouteConfig
方法。 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);
Since both ng.core.Component
and ng.router.RouteConfig
are decorators you can write: 由于
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);
Hope that helps. 希望有所帮助。
Here's a possible way I managed to finally get working. 这是我设法最终开始工作的可能方式。 I'm open to others posting better solutions:
我向其他人发布更好的解决方案:
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
]
})
];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.