Angular 2.0（测试版、ES5）UI 未通过自定义事件更新

Question

我遇到 Angular 2.0.0-beta.2

的问题

我将两个组件分别加载到一个页面中，并在 Angular 2 个组件和 'container' 网站之间进行通信，这些事件是通过 jQuery 的 .trigger 执行的() 和.on().

这个想法是这些组件可以集成到外部网站中，并且可以使用一组预定义的事件在彼此之间进行交互。

然而，我在使用 angular2 时遇到的问题是，如果事件导致更改，绑定不会立即更新 UI，请参阅此处的 Plunkr：https://plnkr.co/edit/VReV7dpx2dYjtDSg9iA4?p=preview

<button (click)="toggle()">Click Me to Toggle</button>

如果您单击 'Click me to Toggle'，这会立即更新内部 'initialHide' 并显示隐藏的 div。如果您单击 'Click me for ShowHide'，它会从 ComponentOne 触发一个事件，该事件由 ComponentTwo 拾取。它会更新 'initialHide' 但不会立即更新 UI。如果您随后单击 'Click me for Event'，它会发现内部属性已更改并更新 UI.

所以，我的问题是 - 这是为什么？是更新 'initialHide' 属性的上下文吗？我首先认为这可能是事件中的错误，但您可以从控制台日志中看到事件正在正常触发并更新 initialHide 属性，但是 UI 没有获取绑定.

有什么办法可以强制执行此操作吗？或者我可以使用的一种机制，当通过来自外部源的事件调用时，它将自动更新绑定。

Answer 1

通过将 NgZone 注入构造函数解决。然后我在 zone.run()

中执行事件代码

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

constructor : [ng.core.NgZone, function (zone) { ... }
this.updateComp = function() { zone.run() { ... } );

Answer 2

我运行遇到了同样的问题（尽管在 Ajax 回调中）。我将 zone.js 从 https://github.com/angular/zone.js/tree/master/dist 更新到最新版本，现在可以使用了。

Answer 3

如果您不使用 on() 而是使用 Angulars 机制来注册事件处理程序，那么您在 Angulars 区域之外的代码运行和更新模型值不会启动更改检测就没有问题循环。

您可以使用

ng.core
  .Component({ 
      ..., 
      host: {'(window:some-event)':'someFunction($event)'},
  })

并且当调用 someFunction() 并更新模型值时，Angulars 变化检测将识别它。

Angular 2.0（测试版、ES5）UI 未通过自定义事件更新

Angular 2.0 (Beta, ES5) UI not updating via custom event

jquery-events

angular