Question

我正在尝试使用HTML的地图元素和Angular 2.我发现这个Q＆amp; A How to use ng-repeat with image map area tag?但它处理的是Angular 1.

简而言之，我想复制此页面http://www.wmo.int/pages/prog/dra/regional_offices.php的可点击地图，但是在Angular 2中并将点击的区域绑定到变量。

我开始为此制作一个组件：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'wmo-regions',
  templateUrl: './wmo-regions.component.html',
  styleUrls: [ './wmo-regions.component.css' ]
})

export class Region {
        name: string;
        coords: string;
};

const Regions: Region[] = [
        {
                coords: '84,132,64,101,16,101,17,55,32,44,18,29,16,10,159,11,142,24,159,39,166,58,189,60,188,127,156,126
,144,122,132,134',
                name: 'Region IV North America, Central America and the Caribbean'
        },
        {
                coords: '87,221,86,134,136,133,142,121,154,126,188,126,189,134,205,133,204,223',
                name: 'Region III South America'
        },
        {
                coords: '149,12,276,12,289,37,288,90,280,88,271,102,265,96,250,99,239,88,227,93,188,93,186,59,166,58,160
,41,140,25',
                name: 'Region VI Europe'
        },
        {
                coords: '188,92,228,91,241,89,249,99,266,95,282,123,301,124,302,146,324,147,324,207,313,208,312,221,207,
222,206,134,189,132',
                name: 'Region I Africa'
        },
        {
                coords: '277,10,444,11,439,54,430,66,439,77,439,111,378,111,353,132,335,134,336,147,316,147,300,146,298,
125,283,125,270,102,279,89,288,89,289,38',
                name: 'Region II Asia'
        },
        {
                coords: '442,221,312,221,310,208,323,206,323,145,334,147,336,132,351,133,378,110,440,109',
                name: 'Region V South-West Pacific'
        }
];

export class WMORegionsComponent {
     @Input() name: string;
}

使用此模板：

<img src="regions.jpg" alt="WMO Regions" width="460" height="247" border="0" usemap="#Map"/>
<map name="Map" id="Map">
<div *ngFor="let region of Regions">
        <area shape="poly"
                [coords]="region.coords",
                [title]="region.name"/>
</div>
</map>

但是在这里事情变得模糊不清。我不知道如何将区域标题与WMORegionsComponent组件的名称字符串属性相关联。

有人可以帮忙吗？

带有区域的Angular 2 HTML地图标记

0 个答案: