Angular 2中的双向绑定与ngClass

Question

在Angular 2中，ngClass是否具有双向绑定功能？

目前我有以下代码用于模态框：

<div class="modal autonomous" [(ngClass)]="{'modal-open' : modalState}">
...
</div>

除了在此Angular应用程序之外，还有管理此模态框的JavaScript。例如，JavaScript（使用jQuery）将在用户单击模态框的某个区域时删除“modal-open”类，但是“modalState”变量保持为“true”。因此，下次我尝试通过设置“modalState=true”在Angular中打开模态框时，模态框仍然关闭，可能是因为变量没有更改（已经是true）。

因此，如果可能的话，如何在Angular 2中实现ngClass双向绑定？

- totoro

Answer 1

不支持这样做。 class 只能使用绑定设置（如 [ngClass]）, 但不会在修改时产生事件。我唯一能想到的方法是轮询，如果不能使更改类的代码在每次更改后触发事件。

- Günter Zöchbauer

---

谢谢！你的意思是在更新 modalState 变量后触发事件吗？我该怎么做？ - totoro

我是指使用jQuery来触发事件，在您的组件更改了“class”之后，以便监听并相应地更新“modalState”。也许我误解了您的问题。 - Günter Zöchbauer

你能快速举个例子说明如何在Angular 2中监听由jQuery触发的变化事件吗？谢谢！ - totoro

如果事件在添加了此代码的元素上触发，则使用(event-name)="soSomething($event)，如果要全局监听，则使用(window:event-name)="soSomething($event)。 - Günter Zöchbauer