从typescript

Question

这让我疯了。

有一个隐藏的输入框如下 <input type='hidden' id='iFrameDrivenImageValue' value='n/a'>

我正试图从.ts读取它的值以提交给DB。 但无法编译TS。停止的错误如下所示： ERROR in /Users/...component.ts (4773,89): Property 'value' does not exist on type 'HTMLElement'.

试图 <HTMLInputElement>document.getElementById("iFrameDrivenImageValue").value;

试图 <HTMLInputElement>document.getElementById("iFrameDrivenImageValue")?.value;

试图 theForm.form.controls['iFrameDrivenImageValue'].value;

当我逐步使用chrome的调试器时，控制台没有任何问题将document.getElementById("iFrameDrivenImageValue").value的值吐出为'n / a'。

我怎样才能让TS看到同样的事情？或者至少冷静一下，这样我就可以编写darn脚本了？

有人可能会问为什么不把香蕉放在盒子里并将其双向捆绑？ 好吧，我用这种米老鼠的方式调试这个值的原因是因为Angular没有看到ngForm输入字段内的变化（当iFrame脚本更新该输入字段中的值时）。去搞清楚！

就Angular而言，ngForm中的iframe驱动/更改值仍然是原始的，并且theForm.form.controls不知道它最近更新的值。

由于所有这些努力都失败了，我被迫试图以老派的方式，但不能得到TS编译。

Answer 1

考虑使用@ViewChild而不是document.getElementById，将输入更改为：

<input #myInput type='hidden' id='iFrameDrivenImageValue' value='n/a'>

然后您可以从组件中访问您的元素，如下所示：

@ViewChild('myInput') myInput;

ngOnInit() {
    console.log(this.myInput);
}

Answer 2

我自己的解决方案是使用localStorage！

我让iframe写入localStorage然后让Angular获取localStorage中的内容。

完成数据传输后，我删除/取消localStorage并继续。

为此，iframed doc和你的angy必须在同一个域上。但是在这种情况下这不应该是一个问题，（因为这是一个问题），那么你无法从get-go中更新iframe中的父窗口。

Not recommending it as a better way, but as a way that is sure-shot.