Angular 2 ES5 中的路由?
Angular 2 routing in ES5?
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() {}
});
但是,我不知道如何在 class 上指定 @Component
内容,以便我可以实际实例化它。例如,
ng.router.RouteConfig([...]).Component({})
抛出异常,因为 .RouteConfig
的结果没有 .Component
方法。同样,.Component
的结果没有 .RouteConfig
方法。您如何设置此设置?
这是我终于开始工作的可能方法。我欢迎其他人发布更好的解决方案:
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
]
})
];
我采用了以下方法,似乎效果很好。
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);
希望对您有所帮助。
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() {}
});
但是,我不知道如何在 class 上指定 @Component
内容,以便我可以实际实例化它。例如,
ng.router.RouteConfig([...]).Component({})
抛出异常,因为 .RouteConfig
的结果没有 .Component
方法。同样,.Component
的结果没有 .RouteConfig
方法。您如何设置此设置?
这是我终于开始工作的可能方法。我欢迎其他人发布更好的解决方案:
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
]
})
];
我采用了以下方法,似乎效果很好。
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);
希望对您有所帮助。