Question

我的应用程序中有一个名为redirectComponent的组件，可以通过调用其放置的路由（http://localhost:4200/redirect/）来简单地从应用程序的其他组件中调用和实例化。

一旦调用redirectComponent，它将对API进行2次调用，以加载绑定到模板中表单的某些数据，一旦加载数据，我将通过ViewChild访问表单并提交（POST方法），然后执行完成此组件后，我导航回到根url：不幸的是，即使解决了API中的数据，表单的绑定数据也不会更新，并且使用未定义的值提交。

TYPESCRIPT代码段：

export class RedirectComponent implements AfterViewInit {
  userName: string;
  sessionToken: string;
  sessionDuration: string;
  loggedUserNavigationUrl: string = 'someUrl.com';

  @ViewChild('microgameform')
  microgameForm: ElementRef;

  constructor(private thirdPartyGameService: ThirdPartyGameService) { }

  async ngAfterViewInit(): Promise<void> {
    await this.redirectUserToThirdPartyGame();
  }

  async redirectToThirdParty(): Promise<void> {
    this.sessionDuration = '51';

    const gameToken: GameToken = await this.thirdPartyGameService.getGameToken();
    this.sessionToken = gameToken.Token;

    const nickNameResponse: NickName = await this.thirdPartyGameService.getNickname();
    this.userName = nickNameResponse.NickName;

    this.microgameForm.nativeElement.submit();
    this.router.navigateByUrl('/');
  }
}

HTML片段：

<form #microgameform name="MicrogameForm" [action]="loggedUserNavigationUrl" method="POST" target="_blank">
    <input type="hidden" name="Username" [value]="userName"/>
    <input type="hidden" name="SessionToken" [value]="sessionToken"/>
    <input type="hidden" name="SessionDuration" [value]="sessionDuration"/>
</form>

现在，当我使用console.log（）在this.microgameForm.nativeElement.submit();之前看到每个变量时，我发现所有变量都已加载但未绑定到表单，这就是我得到的结果：

variables and form values before submit

我认为我遗漏了一些东西，我需要从API检索数据，然后使用post方法将其提交给表单。.可能我遇到了一些竞争状况问题，但我无法弄清楚，我尝试从不同的生命周期挂钩（例如ngAfterViewInit）调用重定向，但出现了不同的错误...

Answer 1

实际上，您需要使用.subscribe()进行异步调用：

this.thirdPartyGameService.getNickname().subscribe( data => {
    this.sessionToken = data.Token;
});

如果您尝试在您的订阅之外记录this.sessionToken，它将是未定义的：

this.thirdPartyGameService.getNickname().subscribe( data => {
    this.sessionToken = data.Token;
    // Operations with the Token
});
// this.sessionToken not loaded yet => undefined

Answer 2

问题与这些行之间的并发有关：

this.microgameForm.nativeElement.submit（）; this.router.navigateByUrl（'/'）;

基于某些未知原因，navigationByUrl会从表单中删除值，甚至更糟的是从html文档中删除表单，因此解决方案是从打字稿代码中将html表单添加到文档中，然后从那里提交表单。

将异步数据加载到表单然后提交时出现问题

2 个答案: