Question

作为我的Angular 2应用程序的一部分，我生成一个列表'views'，其中包含一堆图像的路径。我使用ng-repeat循环显示图像并在ui视图中逐个显示它们。我想为此添加一个事件监听器，以便在单击图像时，将图像src添加到数组中。再次单击该图像将从阵列中删除它。我已经看过涉及一个jquery插件Image Picker，但很快就会变得太乱了。

是否有办法从Angular 2本地执行此操作？

views.html

<body>
  {{views.length}} views found.
  <br>
  <div style="display:inline-block" ng-repeat="x in views">
    <section ui-view>
      <img src={{x}} alt={{x.substring(20,60)}} style="width:192px;height:192px;">
    </section>
</body>

Answer 1

在您的模板中，您可以使用(click)这样的事件：

<img src={{x}} alt={{x.substring(20,60)}} (click)="toggleImageInList(x)" style="width:192px;height:192px;">

在您的组件中，您有一种方法可以在数组中的某处实际添加和删除图像源：

toggleImageInList(image) {
    if (this._images.indexOf(image) >= 0) {
        this._images = this._images.filter((img) => img !== image);
    }
    else {
        this._images.push(image);
    }
}

Plunker例如用法：）

如何将单击事件监听器添加到Angular 2 ui-router <section ui-view =“”>？

1 个答案: