在决心角2路由条件语句 - 获取导航

-1

之前，我有一个应用程序如下。在一个形式在决心角2路由条件语句 - 获取导航

用户填写（路线是'“）
提交表单
数据被发送开了一个REST API
数据接收 - 在一个良好的响应（200）的页面被路由到包含响应的概览页面。（路由是'overview'）在（400）上，它现在失败了。

我用了一个解决这个，我想等到数据路由之前收到。上述确定作品但..

我想是部分地添加以下功能4.

当400或200的非错误接收到我想显示错误并确保路线是''。

我想添加一些条件逻辑的原因是我将它看作角度文档中的一个演示。 fetch before navigating

我有下面的代码为止。

应用组件

const routes: Routes = [ 
    { 
    path: '', 
    component: RegistrationComponent, 
    }, 
    { 
    path: 'overview', 
    component: ConfirmationComponent, 
    resolve: { 
     data: RegistrationResolve 
    } 
    } 
]

表单组件

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']); 
    } 
}

概述部件

export class ConfirmationComponent implements OnInit { 

    constructor(
    private router: Router, 
    private route: ActivatedRoute 
) {} 

    ngOnInit(){ 
    this.route.data 
    .subscribe(val => { 
     this.resolvedData = val["data"]; 
    }); 
    } 
}

解决

export class RegistrationResolve implements Resolve<any> { 

    constructor(
    private regService: RegistrationService, 
    private router: Router 
) {} 

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 

    return this.regService.postDummy('apple'); 

    } 
}

服务

export class RegistrationService { 

    constructor(private http: Http) {} 

    postDummy(data: string): Observable<any> { 
    return this.http 
     .post('https://demo4795542.mockable.io/test', data) 
     .map((response: Response) => response.json()) 
     .catch ((error: any) => Observable.throw(error.json())); 
    } 
}

注：https://demo4795542.mockable.io/test仅仅是一个24小时的测试REST API。

所以看着代码，我认为我需要解决方案中的东西来处理响应。也许在解决方案中而不是在概述中订阅响应。

我的线沿线的思考的东西/，并尝试以下但不工作

解决更换 - 尝试，但未能

export class RegistrationResolve implements Resolve<any> { 

    tempData: any; 

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 

    this.tempData = this.regService.postDummy('test') 
     .subscribe((data:any) => 
     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; 
    } 
    } 
}

任何帮助非常赞赏。由于

来源

2017-06-02 fidev

在RegisterComponent的handleView方法，而不是直接改变路线，你可以开火HTTP请求到服务器，并得到响应。如果响应代码是200，然后chnage路线，否则显示错误

//**Below is the pseudo code** 

    handleView(){ 
     RegisterationService.postDummy().subscribe(function(response){ 
      if(response code is 200){ 
       this.router.navigate(['/overview']);  
     } else{ 
      show error on Ui 
     }  
     }) 
     }

，而是在使用决心'概述路线'使用canActive后卫见 https://angular.io/docs/ts/latest/guide/router.html#!#guards

来源

2017-06-04 04:41:23

在决心角2路由条件语句 - 获取导航

回答

相关问题