typescript Angular 2：将值传递给路由数据解析
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40297165/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2: pass a value to the route data resolve
提问by BeetleJuice
I'm trying to write a DataResolverservice that will allow the Angular 2 router to preload data before initializing my component.
我正在尝试编写一个DataResolver服务，允许 Angular 2 路由器在初始化我的组件之前预加载数据。
The resolver needs to call different API endpoints to fetch data appropriate to the route being loaded. Rather than having a resolver for each of my many components, I'm building one generic resolver. Thus, I'd like to pass custom input in the route definition that points to the correct endpoint. For instance, consider these routes:
解析器需要调用不同的 API 端点来获取适合正在加载的路由的数据。我没有为我的许多组件中的每一个都设置一个解析器，而是构建一个通用解析器。因此，我想在指向正确端点的路由定义中传递自定义输入。例如，考虑以下路线：
app.routes.ts
app.routes.ts
appRoutes = [
{
path: 'project/:id',
component: ProjectComponent,
resolve: { data: DataResolver }
},
{
path: 'store/:id',
component: StoreComponent,
resolve: { data: DataResolver }
}
]
In the first instance, the resolver will need to call /path/to/resource1/id. In the second case, /path/to/resource2/id. Ideally, I would pass the endpoint as an argument in the route definition that would then be available in the DataResolverconstructor.
在第一种情况下，解析器需要调用/path/to/resource1/id. 在第二种情况下，/path/to/resource2/id。理想情况下，我会将端点作为路由定义中的参数传递，然后在DataResolver构造函数中可用。
Can this be done with a generic resolver class?
这可以通过通用解析器类来完成吗？
Angular 2.0.1written in Typescript 2.0.3
Angular 2.0.1写在 Typescript 2.0.3
回答by Paul Samsotha
I don't know about making it available in the constructor, without using DI. But if you want it available in the resolvemethod, you could just add a dataproperty in the route definition, and this would make it available to the ActivatedRouteSnapshot
我不知道如何在不使用 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'];
}
}
回答by itdoesntwork
This answer solved my problem, but I also needed this to be applied in case the route has multiple resolvers.
这个答案解决了我的问题，但我也需要在路由有多个解析器的情况下应用它。
eg.
例如。
{
path: 'transactions/showcase/edit/:id',
component: ClientsTransactionsFormComponent,
resolve: {
clients: Resolver,
clientTransaction: Resolver,
clientTransactionTypes: Resolver
},
In that case I solved my issue by passing an array in data.
在那种情况下，我通过在数据中传递一个数组来解决我的问题。
data: ['Clients/GetAll', 'ClientTransactions/GetByID/', 'ClientTransactionTypes/GetAll']
and also modified my resolver like this..
并像这样修改了我的解析器..
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);
}
hope it helps anybody.
希望它可以帮助任何人。
