CODEWITHSUNDEEP
angularangular-routing
Lijin Durairaj
Lijin Durairaj

Reputation: 3511

Not able to Use Resolve in Angular 2

I want to load object before the view is rendered in angular4, so i choose to use resolve of angular4 but i am not able to get data, dont know what am i doing wrong.

this is my module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ActivatedRoute, Routes, RouterModule } from '@angular/router';
import { ResolverService } from './resolver.service';

export const routes: Routes = [
  { path: '', component: AppComponent, resolve: { transaction: ResolverService } }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot(routes),
    BrowserModule,
    FormsModule
  ],
  providers: [ResolverService],
  bootstrap: [AppComponent]
})
export class AppModule { }

my resolver service

import { Injectable } from '@angular/core';
import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ResolverService implements Resolve<any> {
  constructor(private router: Router) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    return new Observable(observer => {
      setTimeout(function () {
        observer.next(150)
      }, 1000);
    });
  }  
}

this is my component

import { Component, AfterViewInit, APP_INITIALIZER, InjectionToken, Inject } from '@angular/core';
import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot, ActivatedRoute } from '@angular/router';
import { student } from './sa-model.service';
import { Observable } from 'rxjs/Observable';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  constructor(private route: ActivatedRoute) {
  }

  ngAfterViewInit() {
    this.route.data.subscribe(success => {
      debugger;
      console.log(success);
    })
  }

}

but in the component i was expecting to get the value 150 which i am passing in the resolver service, but i am not getting any values

can any one guide me on what exactly am in doing wrong

Upvotes: 1

Views: 413

Answers (2)

David Anthony Acosta
David Anthony Acosta

Reputation: 4918

It's because you opened the observable but never completed it before returning it, so nothing gets returned. Add this:

setTimeout(function () {
  observer.next(150);
  observer.complete(); // Need to call complete once done.
}, 1000);

Upvotes: 1

Julius Dzidzevičius
Julius Dzidzevičius

Reputation: 11000

Use take() ir first():

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
  return new Observable(observer => {
    setTimeout(function () {
      observer.next(150)
    }, 1000);
  }).take(1);
}

You cant pass open Observable in Router

Upvotes: 1

Related Questions