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

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

首先将你的 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
                }
        );
    }
}

希望这会有所帮助。

Answer 2

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

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

redirect to a route after api call in angular2

router

subscribe

angular