javascript - 将常规 JavaScript 变量附加到 Angular 2 模型(输入)？

Question

我的代码场景:我有 Angular 2 应用程序，它在多个字段中有一个输入字段(用于查找)，它在弹出窗口中打开十年前的 URL(使用 window.open() )以获取一些查找数据。它从 window 回调一个函数父页面的对象。

函数在index.html中定义Angular 2 应用程序的页面如下所示:

<script>
  function handler(res) {
    var value = res;
  }
</script>

需求:变量 value现在必须绑定(bind)/绑定(bind)到名为 inputModel 的输入模型.有什么办法可以实现吗？

请注意:我知道这不是一个好的做法 <script>标签，一切都必须基于组件。但这是我收到任务的方式:-P

谢谢!

Answer 1

您可以像这样将值存储在窗口对象上:window['value'] = res;

现在，您可以像这样在 Angular 组件中访问 res 的值 window['value']

但是，现在的问题是，只有在 Angular 组件从 窗口读取 value 时已经调用了 handler 时，这才会起作用 对象。您的 Angular 组件将不会收到更新 window 对象中的 value 属性的任何后续处理程序调用的通知。

因此，您需要一个全局处理函数机制来通知您的 Angular 组件您的窗口对象上的 value 属性已更新。

这是一种从外部 Angular 与 Angular 组件通信的方法:

1. 在 Angular 组件的模板中，创建一个隐藏的input
2. 为此附加一个 (click) 处理程序。
3. 在全局 handler 函数中，使用 document.getElementById('hidden input's id').click() 模拟点击。
4. 现在，您在第 2 步中创建的位于 Angular 上下文中的 (click) 处理程序将被调用。
5. 现在，每次调用全局 handler 函数时，都会调用 Angular 上下文中的 (click) 处理程序，本质上是告诉 Angular 从window 对象。

这是一个working Plunker

在这个 plunker 中，我将全局处理程序函数附加到 html 的 onclick 处理程序，它在 Angular 的上下文之外以模拟您的要求。此点击事件将使用我上面提到的方法传递给 Angular 组件。