重写Node.prototype.addEventListener导致Angular属性绑定失效

问题场景 #

我有如下Angular模板：

<form id="form">
  <input id="email" name="email" [(ngModel)]="email" />
  <input type="submit" [disabled]="!email"/>
</form>

原本功能正常：在email输入框中输入内容时，提交按钮会自动启用。但在index.html顶部添加以下重写Node.prototype.addEventListener的代码后，输入内容时提交按钮不再启用：

<script>
  var ogListener = Node.prototype.addEventListener;

  Node.prototype.addEventListener = function (event, listener, useCapture) {
    console.log("Adding event: " + event);
    ogListener.apply(this, [].slice.call(arguments));
  };
</script>

原因分析 #

问题核心是Zone.js的事件拦截机制被破坏。Angular依赖Zone.js监听浏览器事件并触发变更检测，Zone.js加载时会自动patch浏览器原生API（包括addEventListener），这样事件触发时Zone.js会同步触发Angular的变更检测，确保视图与组件数据同步。

你将重写代码放在index.html顶部，会在Zone.js加载前覆盖原生addEventListener方法。后续Zone.js加载时，只会patch原始的原生方法，无法作用到你替换后的自定义方法上。当input事件触发时，Zone.js无法检测到该事件，也就不会触发变更检测，导致组件的email属性更新后，视图中按钮的disabled状态无法同步更新。

解决方案 #

1. 调整代码加载顺序 #

将重写代码移到Zone.js及Angular相关资源加载之后（通常是polyfills.js和main.js之后）。这样Zone.js会先patch原生方法，你的代码再包装已被Zone.js处理过的方法，确保事件触发时仍能触发变更检测：

<!-- 先加载Zone.js及Angular资源 -->
<script src="polyfills.js"></script>
<script src="main.js"></script>
<!-- 再添加重写代码 -->
<script>
  var ogListener = Node.prototype.addEventListener;

  Node.prototype.addEventListener = function (event, listener, useCapture) {
    console.log("Adding event: " + event);
    ogListener.apply(this, arguments);
  };
</script>

2. 手动适配Zone.js（需确保Zone已加载） #

如果必须在Zone.js之前加载重写代码，可以手动将listener包装在Zone.js的回调中，确保事件触发时能触发变更检测：

var ogListener = Node.prototype.addEventListener;

Node.prototype.addEventListener = function (event, listener, useCapture) {
  console.log("Adding event: " + event);
  // 若Zone已加载，包装监听函数
  if (window.Zone) {
    listener = window.Zone.current.wrap(listener);
  }
  ogListener.apply(this, arguments);
};

注意：尽量避免直接重写原生原型方法，这种操作容易引发不可预见的兼容性问题，若只是需要监听事件添加行为，建议使用MutationObserver或事件代理等更安全的方式。

内容的提问来源于stack exchange，提问作者SpyMachine