Javascript Angular 2-更新隐藏表单字段，然后发布到外部页面

我有一个Angular2应用程序，在某个时候需要向用户发送一个带有POST请求的外部服务页面

基本上，流程应该如下所示

• 用户点击一个按钮
• 拦截并阻止默认表单提交事件
• 执行API调用以在后端设置一些内容，并检索一些值以传递给外部服务
• 一些隐藏的表单字段由从API检索的数据填充
• 然后触发表单提交

据我所知，在Angular中无法执行“POST to external page”类型的操作，必须使用

ngNoForm

覆盖Angular的表单处理，并允许浏览器将其作为常规帖子处理

所以，目前，我有一个这样的模板：

<form ngNoForm (submit)="proceedToService($event)" method="POST" action="https://some-service.com/etc">
 <input type="hidden" name="token" [value]="someToken">
 <button type="submit">Proceed to external service</button>
</form>

（

doSomeStuff

返回一个可观察值）

这种方法的问题在于，提交事件似乎在DOM中填充值之前被触发，这意味着POST请求中的

标记
字段为空

通过包装
$event.target.submit（），我可以让它工作在setTimeout调用中，如下所示：

setTimeout（（）=>{$event.target.submit（）}，1000）

但这感觉像是一种超级黑客的方式，无论如何都可能失败（如果更新需要1秒以上怎么办？），而且很难测试

那么，有没有更好的方法来实现这一点？理想情况下，我想做的是观察隐藏输入的值在DOM中实际更新，然后在该点触发submit。但到目前为止，我还无法找到一种方法来实现这一点——例如，ngModel绑定不支持隐藏字段

我对角度世界非常陌生，尤其是Angular2，因此我可能从完全错误的角度来处理这一问题，但如果有任何帮助，我将不胜感激。
我使用
AfterViewChecked
找到了一个潜在的解决方案，如下所示：

private pendingEvent;

proceedToService($event) {
    $event.preventDefault();
    this.apiHandler.doSomeStuff().subscribe(
        (someStuff) => {
            this.someToken = someStuff.token;
            this.pendingEvent = $event;
        }
    );
}

ngAfterViewChecked() {
    if ( this.pendingEvent ) {
        this.pendingEvent.target.submit();
        this.pendingEvent = null;
    }
}

这似乎符合我的要求-因为检查视图后会调用
ngAfterViewChecked
，并且在更新视图后会检查视图（我假设？），此时值已正确填充

在我不熟悉Angular的情况下，我不确定这是最好的解决方案还是实际可行的解决方案，但它至少比使用setTimeout“感觉”更好…
您可以通过使用模板引用变量和button type=“button”组合来实现这一点

<form ngNoForm #extForm method="POST" action="https://some-service.com/etc">  
 <button type="button" (click)="proceedToService(extForm)">External Service</button>
</form>

我希望这对你有帮助

<form ngNoForm #extForm method="POST" action="https://some-service.com/etc">  
 <button type="button" (click)="proceedToService(extForm)">External Service</button>
</form>

proceedToService(frm) {
    this.apiHandler.doSomeStuff().subscribe(
      (someStuff) => {        
        var input = document.createElement("input");
        input.type = "hidden";
        input.name = "token";
        input.value = someStuff.token;;
        frm.appendChild(input);
        frm.submit();
      }
    );
  }