Question

我尝试编写DataResolver服务，允许Angular 2路由器在初始化组件之前预先加载数据。

解析程序需要调用不同的API端点来获取适合于正在加载的路由的数据。我没有为我的许多组件设置解析器，而是构建了一个通用的解析器。因此，我想在路由定义中传递指向正确端点的自定义输入。例如，考虑以下路线：

app.routes.ts

appRoutes = [
  {
     path: 'project/:id',
     component: ProjectComponent,
     resolve: { data: DataResolver }
  },
  {
     path: 'store/:id',
     component: StoreComponent,
     resolve: { data: DataResolver }
  }
]

首先，解析器需要调用/path/to/resource1/id。在第二种情况下，/path/to/resource2/id。理想情况下，我会将端点作为路由定义中的参数传递，然后在DataResolver构造函数中可用。

可以使用通用解析程序类吗？

用Angular 2.0.1

撰写的

Typescript 2.0.3

Answer 1

我不知道在不使用DI的情况下在构造函数中使它可用。但是，如果您希望在resolve方法中使用它，则只需在路径定义中添加data属性，这将使其可用于ActivatedRouteSnapshot

{
  path: 'project/:id',
  component: ProjectComponent,
  resolve: { data: DataResolver },
  data: { path: 'project/:id' }
}

class DataResolve implements Resolve<string> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return route.data['path'];
  }
}

Answer 2

这个答案解决了我的问题，但是如果路线有多个旋转变压器，我也需要这个。

例如

   {
    path: 'transactions/showcase/edit/:id',
    component: ClientsTransactionsFormComponent,
    resolve: {
      clients: Resolver,
      clientTransaction: Resolver,
      clientTransactionTypes: Resolver
    },

在这种情况下，我通过在数据中传递数组来解决我的问题。

data: ['Clients/GetAll', 'ClientTransactions/GetByID/', 'ClientTransactionTypes/GetAll']

还修改了我的解析器..

resolve(route: ActivatedRouteSnapshot) {
    let row = [];
    let id = "";

    Object.keys(route.data).forEach(e => {
      row.push(route.data[e]);
    })

    let path: string = row[0];
    delete row[0];

    route.data = row;

    if (path.lastIndexOf('/') == path.length - 1) {
      id = route.params['id'];
    }

    return this._httpService.httpGet(this.baseUrl + path + id);
  }

希望它可以帮助任何人。

Angular 2：将值传递给路径数据解析

2 个答案: