在決心角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路由條件語句 - 獲取導航

回答

相關問題