问题描述
在ui-router中,可以很容易地在路由配置中定义多个解析,所以可以这样说:
In ui-router its easy to make multiple resolves defined in the route configuration, so lets say something like:
export const APP_STATES: Ng2StateDeclaration[] = [
{
name: 'dashboard',
url: '/dashboard',
component: DashboardComponent,
resolve: [
{
token: 'playbookDurations',
deps: [DashboardService],
resolveFn: (svc: DashboardService) => svc.getPlaybookDurations()
},
{
token: 'playbookSuccesses',
deps: [DashboardService],
resolveFn: (svc: DashboardService) => svc.getPlaybookSuccesses()
},
{
token: 'playbookRuns',
deps: [DashboardService],
resolveFn: (svc: DashboardService) => svc.getPlaybookRuns()
},
{
token: 'activityLog',
deps: [DashboardService],
resolveFn: (svc: DashboardService) => svc.getActivityLog()
}
]
}
}];
当使用Angular2路由器时,您需要为resolve参数实现一个解析器模式.像这样:
when using the Angular2 router is requires you to implement a resolver pattern for the resolve parameter. So something like this:
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { DashboardService } from '.';
@Injectable()
export class DashboardResolver implements Resolve<any> {
constructor(private dashboardService: DashboardService) { }
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
return this.dashboardService.get();
}
}
然后在我的路线中,我会执行以下操作:
then in my route I do something like:
import { DashboardComponent } from './dashboard.component';
import { DashboardResolver } from './dashboard.resolver';
export const routes = [
{
path: '',
children: [
{
path: '',
component: DashboardComponent,
resolve: {
data: DashboardResolver
}
}
]
}
];
问题只有一个解决.像ui-router实现一样,如何实现多个可解析参数?
problem is there is only ONE resolve. How does one implement multiple resolve arguments like the ui-router implementation does?
我想您有2种选择;为这些输入中的每个输入实现解析器,或者使resolve返回一个嵌套了您所有的resolve的对象.第一个听起来很礼仪,第二个听起来很hacky,所以必须有更好的方法.
I suppose you have 2 options; implement resolvers for each one of those inputs OR have the resolve return a object with all your resolves nested. The first seems pretty ceremonial and the second sounds pretty hacky so there has to be a better way.
推荐答案
好的,我希望我没有误解这个问题.
Alright, I hope I haven't misunderstood the question.
Angular的路由器可以根据需要在每个路由中支持尽可能多的解析器.
Angular's router supports as many resolvers per route as you want.
在路由声明中,resolve
属性是一个对象,它可以具有任意数量的键:
In the route declaration, the resolve
property is an object and it can have as many keys as you'd like:
{
path: '',
component: DashboardComponent,
resolve: {
foo: Resolver1
bar: Resolver2,
// more resolves here...
}
}
然后从您的组件中检索已解析的数据:
Then retrieve the resolved data from your component:
@Component({ ... })
export class MyComponent {
constructor(private route: ActivatedRoute) { }
ngOnInit() {
const foo = this.route.snapshot.data['foo'];
const bar = this.route.snapshot.data['bar'];
}
}
直到所有解析都完成/完成,路由才会被激活.
The route won't be activated until ALL resolves are complete/fulfilled.
这篇关于Angular2 Router and Multiple Resolves一条路线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!