Angular2 路由器和一个路由中的多个解析

问题描述

在 ui-router 中很容易在路由配置中定义多个解析，所以让我们说:

In ui-router it's easy to make multiple resolves defined in the route configuration, so let's 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 as the ui-router implementation does?

我想您有 2 个选择:为这些输入中的每一个实现解析器，或者让解析返回一个包含所有解析嵌套的对象.第一个看起来很仪式，第二个听起来很老套，所以必须有更好的方法.

I suppose you have 2 options: implement resolvers for each one of those inputs OR have the resolve return an 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 路由器和一个路由中的多个解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！