Angular 2.0 强制刷新类似于 $apply

Question

我正在开发一个应用程序，可以从列表中拖动一个组件（Angular2组件，以下相同）并将其放入另一个组件中。在这个过程中，我使用interactjs来实现组件的拖放。但是，当我将组件放入另一个组件中时，它只会加载被拖动组件的静态HTML。

例如，我想把这个组件添加到另一个组件中：

import {Component, View} from 'angular2/angular2'

@Component{
    selector:"sample"
}

@View{
    template:`<p>static content</p><p>{{contentToBind}}</p>`
}

class Sample{
    contentToBind:string= "I am the binding content."
}

添加后，应该看起来如下：

static content
I am the binding content.

但实际上它只显示静态内容，例如：

static content

您可以在这个plunker中查看此示例。

然后我将一个click HostListener绑定到这个Sample组件上，当我点击该组件已经添加到另一个组件中时，“I am binding content”将出现（其他触发事件相同）。 我认为由于交互，它已经跳出了angular2的生命周期。

在AngularJs 1.x中是否有类似于$apply()的方法？

- Garry

---

可能的问题是您的变量名称与模板中的不匹配。 - Eric Martinez

@EricMartinez 我已经检查过了。不幸的是，这个点不是问题所在... - Garry

抱歉，我已经在问题中更新了变量。 - Garry

好的，现在最好的选择是创建一个plnkr来重现这个问题或者一个repo来克隆它。可能是一个区域问题。 - Eric Martinez

我稍后会更新一个 Plnkr。 - Garry

@EricMartinez 我已经添加了 Plunker。 - Garry

Answer 1

Interact 不是 Angular 2 的一部分，也许您在 Interact 中的代码超出了 Angular 2 的范围，就像您所说的那样。

您可以在 plunker 的 Interactjs 文件中使用 NgZone，我已经编辑了您的代码，并且现在可以工作。您应该在 NgZone 内部发送事件。

类似这样。

myParent.ngZone.run(
    () => {
        console.log("onDrop...");
        ce.drop("Hello");
    }
);

See it on plunker Plunker

- Lolo.

---

谢谢。这个解决方案解决了问题，运行良好。 - Garry