当第 3 方使用 DOM 更改输入值时，强制 Angular2 更新模型

Question

这是简化的 plunker 示例：

https://plnkr.co/edit/yU9gLsiQJkwsz81H0RBw?p=preview

有一个输入绑定到 val:

<input id="inpt" [(ngModel)]="val"/>

还有一些绑定到同一个 val 的 UI：

<h1>{{val}}</h1>

如果你输入输入，h1 会改变。

该按钮正在扮演第 3 方的角色，它通过以下方式更改输入：

document.getElementById("inpt").value="33";

点击按钮后，h1值没有变为“33”，因为模型还没有更新。

我实际使用的第 3 方是输入字段上的 jqueryui 自动完成功能。

如何强制数据绑定运行（特别是这里需要从 DOM 到模型），以便 UI 的其余部分可以对这种变化做出反应？

您将在 plunker 中看到我试图使用 ngZone 将 document.getElementById("inpt").value ="33" 包装在 ngZone.run 中，但我担心这可能只与模型有关-> DOM 方向。我还看到了更多与更新 DOM 相关的示例。

在 angularjs 中，来自 DOM 的模型更新可以通过以下方式完成： angular.element(this).triggerHandler('input');

Answer 1

你能做到吗？默认 ngModel 监听输入事件以进行视图->模型更新。

export function createFakeEvent(type: string) {
  let event = document.createEvent('Event');
  event.initEvent(type, true, true);
  return event;
}

function dispatchFakeEvent(node: Node | Window, type: string) {
   node.dispatchEvent(createFakeEvent(type));
} 

do() {
   document.getElementById("inpt").value="33";
   dispatchFakeEvent( document.getElementById("inpt"), 'input');
 }

Answer 2

您可以在do() 方法中处理此问题，如下所示

do() {
    this.val = "33"

  }

Updated plunker

Answer 3

您的问题似乎源于使用了候选版本。当前版本按预期工作。 here 你可以看到它按预期工作。

export class AppComponent { 
  val = 'someThing'

  do() {
        document.getElementById("inpt").value="33";
  }
}

只是工作。 zonejs 通常会检测到这样的事情。但是，如果您的第 3 方做了一些非常出乎意料的事情，并且在当前版本的 Angular 中没有更新，您可以查看changeDetectorRef。您可以使用.markForCheck 或事件.tick 方法来强制进行更改检测。