Angular2：如何实现图片映射区域

Question

我正在尝试在 Angular 2 中实现图像映射区域，例如（在 Angular JS 中） http://plnkr.co/edit/5bfNEQxqPfzZxuBJOSWm?p=preview

我做了什么：

product.component.html

<div class="row“>
  <div id="image_map"> 
    <map name="map_example"> 
      <area shape="poly" coords="0.847,0.885, 1.133,0.669, 1.451,1.085, 1.176,1.225" ng-click="selectPart(546)"> 
      <area shape="poly" coords="1.171,0.604, 1.548,0.416, 1.813,0.988, 1.511,1.052" ng-click="selectPart(547)"> 
    </map> 
    <img src="../../../assets/images/map_product_1_part.png" alt="image map example" width=557 height=441 usemap="#map_example"> 
  </div> 
</div>

product.component.ts

…
selectPart(part: number)
{
     console.log("click on" + part);
}

结果：未检测到或无法点击图像区域。

我知道 Angular 2 中的代码和逻辑应该不同，但我对此很陌生，非常感谢任何建议。

Answer 1

angular2 中没有 ng-click 属性。

改用(click)或on-click

Plunker Example

Angular2：如何实现图片映射区域

Angular 2: how to implement image map area

javascript

angularjs

html

angular

area