在决心角2路由条件语句 - 获取导航
问题描述:
之前,我有一个应用程序如下。在一个形式在决心角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;
}
}
}
任何帮助非常赞赏。由于
答
在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