Angular2 Router and Multiple Resolves一条路线 [英] Angular2 Router and Multiple Resolves in one route

问题描述

在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一条路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！