Equivalent to resolve in Component Router?
See original GitHub issueWith the removal of the @InjectPromise and @InjectLazy decorators, is there an equivalent functionality to resolve in ngRoute/uiRouter?
The angular1 version would look something like:
//controller
function MyController(foo){}
//route config
{
controller: 'MyController',
url: 'foos/:fooId',
resolve: {
foo: function($routeParams,FooService){ return FooService.getFooById($routeParams.fooId); }
}
}
This is IMO, one of the killer features of the current router and UI-router, as it remove async entirely from the controller and makes it super easy to test. The canActivate etc hooks cover one of the use cases for resolve (preventing access to routes/state), but I can’t see a replacement for the above case. Perhaps I’m missing something?
I’ve been tinkering with an idea like this for NG2, implementing resolve as a decorator:
@Component({ selector: 'foo-detail' })
@View({ template: '<div>{{foo.name}}</div>'})
//token : resolver : injectables
@Resolve(Foo, (params, fooService) => fooService.getFooById(params.fooId), [RouteParams, FooService])
class FooDetailComponent {
constructor(public foo: Foo){}
}
An alternative syntax might look like:
@Resolve({
foo(params:RouteParams, fooService:FooService){ return fooService.getFooById(params.fooId) }
})
Though that limits you to string keys and I can’t figure a way to pass bindings, and I’m not sure reflect will allow us to grab the metadata annotations this way.
Under the hood, it keeps async out of the injector, as its “simply” a matter of executing the resolver fn before passing them to the component’s overridden bindings. Thoughts?
Issue Analytics
- State:
- Created 8 years ago
- Reactions:13
- Comments:37 (12 by maintainers)
+1 for @Resolve decorator.
Data-fetching belongs in a decorator instead of in ngOnInit() or routerOnActivate() IMHO.
Link to some documentation about this ? Is it purely the life cycle hooks ? And DI inject into them ? Was that the final solution ? Cheers!