如何创建分两部分重用的方法?(打字稿，谷歌地图)

Question

我有一个谷歌地图，我有一个代码，当它点击它时显示标记的信息，代码几乎相同，变量只是不同。 示例：在第一部分中，我显示了 5 个标记，单击它们并显示信息：

marker.addListener('click', () => {
//create the content
let markerInfoTemplate = `
<span class="title">${this.locations[i][0]}</span><br>
<span class="address">${this.locations[i][3]}</span><br>
<button class="text-button">
<a href="${this.locations[i][4]}">Show route</a>
</button>
`;
this.infowindow.setContent(markerInfoTemplate);
this.infowindow.open(map, marker);
//change the markers icons
this.deselectAllMarkers();
marker.setIcon(this.activeIcon);
});

第二个代码，在寻找前"餐饮"时，会显示几个标记：

currentMarker.addListener('click', () => {
//create the content
let markerInfoTemplate = `
<span class="title">${place.name}</span><br>
<span class="address">${place.adr_address}</span><br>
<button class="text-button">
<a href="${place.url}">Show route</a>
</button>
`;
this.infowindow.setContent(markerInfoTemplate);
this.infowindow.open(map, currentMarker);
//change the markers icons
this.deselectAllMarkers();
currentMarker.setIcon(this.activeIcon);
});

正如我所说，代码是相同的，除了变量。如何重构代码使其不重复？ 我应该做一种方法吗？我该怎么做？

Answer 1

如果您愿意，可以重用整个代码片段。 假设所有这些代码都在一个类中，您将定义如下方法：

// TODO: Replace `any` with the correct type for a marker.
setupMarkerClickHandler(marker: any, name: string, address: string, url: string) { 
marker.addListener('click', () => {
//create the content
let markerInfoTemplate = `
<span class="title">${name}</span><br>
<span class="address">${address}</span><br>
<button class="text-button">
<a href="${url}">Show route</a>
</button>
`;
this.infowindow.setContent(markerInfoTemplate);
// TODO: Replace `map` with another way of referring to the map (maybe save
// the map in a property of `this`).
this.infowindow.open(map, marker);
//change the markers icons
this.deselectAllMarkers();
marker.setIcon(this.activeIcon);
});
}

然后致电：

this.setupMarkerClickHandler(marker, this.locations[i][0], this.locations[i][3], this.locations[i][4]);

和：

this.setupMarkerClickHandler(currentMarker, place.name, place.adr_address, place.url);

我注意到您将字符串插入 HTML 而不转义，如果您不控制这些字符串的来源，这可能是一个安全问题。 从中选择您最喜欢的解决方案，例如，此处以转义字符串。