angular 2 Router resolver and reusable component

Question

Have a resolver, which resolves empty model when user navigates to "create" url, or fetches existent model from DB:

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {

    if (route.params['id'] === 'new') {
        return new Timeline(null, '');
    } else {
        console.log('Resolving timeline from Firebase: ' + route.params['id']);

        return this.af.database.object('timelines/' + route.params['id'])
            .map((val) => {
                return new Timeline(val.$key, val.title)
            })
           .first();
    }

}

It must return closed observable (as mentioned here).

In the component I retrieve resolved data from route.data observable.

ngOnInit() {
    this.sub = this.route.data.subscribe(
        (data) => {
            this.timeline = data['timeline'];
        }
    );
}

So, everything works fine.

But when user submits new model, the component navigates to itself (with new key from DB in url)

this.timelines.push(formValue).then((val) => {
 this.router.navigate(['/timeline', val.key]);
});

I expected resolver to return fetched entity from DB, but in

ngOnInit() {
    this.sub = this.route.data.subscribe(
        (data) => {
            this.timeline = data['timeline'];
        }
    );
}

I have data as empty object: {}. Have I done something wrong?

Angular version: 2.0.0

Your route configuration should look like `resolve: { 'timeline': TimelineResolve }`. Do you have that? — Paul Samsotha, Oct 03 '16 at 08:00
@peeskillet yes, it is fully consistent with your code snippet — anzem, Oct 05 '16 at 01:22

angular 2 Router resolver and reusable component

0 Answers0