在 Angular 中创建值后立即导航编辑 window 2+

Question

我有一个正在尝试学习的测试项目Angular。在这个项目中，我有 2 个 HTML 表单可以让我创建一个参与者。基本上，为了简单起见，我将这些表单分为 2 个子表单。我使用第一种形式来捕获一些人口统计数据，我使用第二种形式来添加更多详细信息，例如收入、教育详细信息等。我的方法如下：首先创建参与者，使用 router 和 ActivatedRoute通过传递新创建的参与者 ID 和更新来导航第二个表单。

基本上，第一个表单用于创建，第二个表单仅用于更新目的。如果我将任何数字作为参与者 ID，这两种形式都可以正常工作。但是，我无法在创建新参与者后立即将参与者 ID 传递给第二个表单。我得到 undefined 而不是参与者 ID。我不确定如何在创建参与者 ID 后立即传递该参与者 ID，以便我可以使用该 ID 并更新其他详细信息。

这是创建和更新 TypeScript 代码。请注意，我没有在这里放置服务和解析器代码，因为它们工作正常。唯一的问题是传递 id。

用于创建（第一种形式）：

this.participantService.add(this.participant).subscribe(res => {
      console.log('participant has been created!');
    });
this.router.navigate(['public-access/form2/' + this.participant.id]);

并更新（第二种形式）：

export class Form2Component implements OnInit {
  participant: any = {};

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private participantService: ParticipantService
  ) {
    route.params.subscribe(p => {
      this.participant.id = +p['id'] || 0;
    });
  }

  ngOnInit() {
    this.route.data.subscribe(data => {
      this.participant = data['participant'];
    });
  }

  submit() {
    // participant Update
    this.participantService.update(this.participant).subscribe(participant =>{
      this.participant = participant;
      this.router.navigate(['/public-access/form-success']);
      console.log('Participant study status is succefully saved!');
    }, error => {
      console.log('Participant study status is NOT saved!');
    });
  }

}

我在控制台中收到的实际错误是

zone.js:2969 GET http://localhost:5000/api/Participants/undefined 404 (Not Found)

完成此任务的最佳方法是什么？任何帮助将不胜感激。

Answer 1

您甚至在从后端获得 id 之前就调用了 navigate 函数。

您可能会做的是，等待来自后端的响应并从那里获取 id 然后导航。

用于创建（第一种形式）：

this.participantService.add(this.participant).subscribe(res => {
  console.log('participant has been created!');

  // search for the id in your response object and append that
  this.router.navigate(['public-access/form2/' + <id>]);
});

在 Angular 中创建值后立即导航编辑 window 2+

Navigating edit window right after create a value in Angular 2+

routes

angular-routing

angular

angular-router