title: Conditional statement for routing in resolve angular 2 - fetch before navigating
body: <p>I have an app as follows.</p>
  
  <ol>
  <li>User fills in a form (route is ' ')</li>
  <li>Submits the form</li>
  <li>Data is sent off to a REST api</li>
  <li>Data is receive - On a good response (200) the page is routed to an overview  page containing the response. (route is 'overview') On a (400) it currently fails silently.</li>
  </ol>
  
  <hr>
  
  <p>I've used a resolve for this as I want to wait until data is received before routing. The above works ok but..</p>
  
  <p><strong>What I want</strong> is to add the following functionality in part 4.</p>
  
  <ol start="4">
  <li>When a 400 or non 200 error is received I want to display an error and ensure the route is ' '.</li>
  </ol>
  
  <p>My reason for wanting to add some conditional logic in was that I saw it as a demo in the angular docs. <a href="https://angular.io/docs/ts/latest/guide/router.html#!#fetch-before-navigating" rel="nofollow noreferrer">fetch before navigating</a></p>
  
  <p>I have the following code so far.</p>
  
  <p><strong>App component</strong></p>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      component:  RegistrationComponent,
    },
    {
      path: 'overview',
      component: ConfirmationComponent,
      resolve: {
          data: RegistrationResolve
      }
    }
  ]
  </code></pre>
  
  <p><strong>Form component</strong></p>
  
  <pre><code>export class RegistrationComponent implements OnInit {
  
    constructor(
      private router: Router,
      private regService: RegistrationService,
      private route: ActivatedRoute
    ){}
  
    onSubmit(event: RegDetails){
      this.handleView();    
    }
  
    handleView(){
      this.router.navigate(['/overview']);
    }
  }
  </code></pre>
  
  <p><strong>Overview component</strong></p>
  
  <pre><code>export class ConfirmationComponent implements OnInit {
  
    constructor(
      private router: Router,
      private route: ActivatedRoute
    ) {}
  
    ngOnInit(){
      this.route.data
      .subscribe(val =&gt; {
        this.resolvedData = val["data"];
      });
    }
  }
  </code></pre>
  
  <p><strong>Resolve</strong></p>
  
  <pre><code>export class RegistrationResolve implements Resolve&lt;any&gt; {
  
    constructor(
      private regService: RegistrationService,
      private router: Router
    ) {}
  
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  
      return this.regService.postDummy('apple');
  
    }
  }
  </code></pre>
  
  <p><strong>Service</strong></p>
  
  <pre><code>export class RegistrationService {
  
    constructor(private http: Http) {}
  
    postDummy(data: string): Observable&lt;any&gt; {
      return this.http
        .post('https://demo4795542.mockable.io/test', data)
        .map((response: Response) =&gt; response.json())
        .catch ((error: any) =&gt; Observable.throw(error.json()));
    }
  }
  </code></pre>
  
  <blockquote>
    <p><strong>NOTE:</strong> <a href="https://demo4795542.mockable.io/test" rel="nofollow noreferrer">https://demo4795542.mockable.io/test</a> is only a 24hr test REST api.</p>
  </blockquote>
  
  <p>So looking at the code I think I need something within the resolve to handle the response. Perhaps subscribing to the response in the resolve rather than in the overview.</p>
  
  <p>I'm thinking of something along the lines of / and have tried the below but doesn't work</p>
  
  <p><strong>Resolve</strong> replacement - tried but failed</p>
  
  <pre><code>export class RegistrationResolve implements Resolve&lt;any&gt; {
  
    tempData: any;
  
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  
      this.tempData = this.regService.postDummy('test')
        .subscribe((data:any) =&gt;
          this.tempData = data["data"]
      );
  
      if (this.tempData !== undefined) {
        console.log('Successful - routing to page');
        return this.tempData;
      } else {
        console.log('Failed - not router anywhere');
        this.router.navigate(['']);
        return null;
      }
    }
  }
  </code></pre>
  
  <p>Any help much appreciated. Thanks</p>