在angular2中调用api后重定向到路由

Question

在处理（通过api）通过表单提交的数据用户后，我需要将用户重定向到另一个组件。以下是我试过的代码。

在组件中

onSubmit(model){
  if(model.valid === true) {
    this.SharedService.postFormdata(model).subscribe(
       data  => { console.log(data)},
       error => Observable.throw(error);   
    );
    this.router.navigate(['PublicPage']);
  }
}

但是，在调用完成后，它不会重定向到PublicPage组件。请帮忙。谢谢。

Answer 1

import { Router } from '@angular/router';

export class HeroesComponent {

  constructor(private router: Router) { }

  onSubmit(modal): void {
    if(model.valid === true) {
      this.SharedService.postFormdata(model).subscribe(
      (data) => { 
        // Page redirect when getting response
        this.router.navigate(['/PublicPage']);
      }, 
      (error) => {
        console.log("err", error);   
      });
    }

  }

}

为了更好地理解，请阅读本文档：Angular2 routing

Answer 2

首先把你的error放在data块之外然后如果你想重定向，如果它成功然后加入

data => { this.router.navigate(['PublicPage']); }

或者如果你想要电话，那么使用

() => {
        this.router.navigate(['PublicPage']);
}

所以试试这样：

onSubmit(model) {
    if (model.valid === true) {
        this.SharedService.postFormdata(model).subscribe(
            data => {
                console.log(data);
                this.router.navigate(['PublicPage']); // ON SUCCESS
            },
            error => Observable.throw(error),
            () => {
                    this.router.navigate(['PublicPage']); //ANYHOW WILL CALL
                }
        );
    }
}

希望这会有所帮助。