Ionic 4 / Angular 7 按钮在 Google Maps Marker InfoWindow 中工作

Question

更新：元素检查器下 Google 地图信息窗口中按钮上的元素如下所示：

<ion-button href="/tabs/(map:place/135)" routerdirection="forward" ion-activatable="" class="button button-solid hydrated">Details</ion-button>

但是普通页面上的按钮看起来像（里面有更多东西）：

<ion-button _ngcontent-c1="" href="/tabs/(home:place/135)" routerdirection="forward" ng-reflect-router-direction="forward" ng-reflect-href="/tabs/(home:place/135)" ion-activatable="" class="button button-solid hydrated">Details</ion-button>

为什么？

我在第 34 行 (HrefDelegate.prototype.onClick) 上的 @ionic/angular/dist/directives/navigation/href-delegate.js (HrefDelegate.prototype.onClick) 中插入了一个中断，如果我在普通页面上使用一个按钮，它就会中断（完全相同）文本），但如果我在谷歌地图信息窗口中单击我的按钮，则不会。

---

我正在尝试从谷歌地图标记传递 routerDirection（离子）。更普遍的问题是我试图在 infoWindow 中做一些有角度的事情。用户单击标记，它会显示一个框，其中包含一个具有 routerDirection 的按钮。来自普通按钮的 routerDirection 对我有用，但不适用于 infoWindow。

当使用标记内容向前过渡时，下一页上没有返回按钮。我在下一页的离子后退按钮上没有 defaultHref，如果我这样做了，它会显示一个后退按钮，但始终使用不是本意的 defaultHref。我希望它导航回我的地图选项卡，但它似乎不知道我从哪里向前导航。

我有一个地图组件页面和一个完成大部分工作的 google-map 组件。当我创建一个标记时，我将它的内容传递给显示（有两个按钮用于测试）：

      const content = `
      <h5>${place.name}</h5>
      <p>${place.description}</p>
      <ion-button href="/tabs/(map:place/135)" routerDirection="forward">Details</ion-button>
      <ion-button routerDirection='forward' href='/tabs/(map:place/${place.id})'>Details</ion-button>
      `;
      markers.push({ lat: place.lat, lng: place.lon, title: place.name, content: content });
    }
    if (typeof this.map !== 'undefined') {
      this.map.addMarkers(markers);
    }

this.map 指的是我前面提到的 google map 组件。

@ViewChild(GoogleMapComponent) map?: GoogleMapComponent;

在我的 google-map 组件的 addMarkers 方法中，它添加了如下内容：

const marker = new google.maps.Marker(options);

if (typeof location.content !== 'undefined') {
const infoWindow = new google.maps.InfoWindow({
  content: location.content
});
marker.addListener('click', () => {
  if (typeof this.infoWindow !== 'undefined') {
    this.infoWindow.close();
  }
  infoWindow.open(this.map, marker);
  this.infoWindow = infoWindow;
});

因此，当我单击标记内容中的按钮时（单击标记后），我导航但没有返回按钮。有任何想法吗？感谢您的帮助。

Answer 1

Angular 2+ 中没有 $compile。因此，我没有使用我认为没有正确编译的 navigateFoward，而是使用了 .navigateForward 方法并通过包含元素 ID 的 html 链接到该方法。我使用那个元素 ID 来传递一个函数。

我有一个自定义类型供我的标记传递给我的函数：

locations: {
lat: number, lng: number,
content?: { title: string, html: string,
  click?: {clickElementId: string, clickFunction: () => void }}}[]

所以我必须传递一个 lat/lng，我可以为 infoWindow 提供包含标题和一些 html 的附加内容，如果我想进一步自定义它，我可以包含一个被点击的元素和一个函数随它去吧。

下面是接受该类型并在循环内处理标记的函数：

for (const location of locations) {
const latLng = new google.maps.LatLng(location.lat, location.lng);

  const options: google.maps.MarkerOptions = {
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: latLng
  };

  const marker = new google.maps.Marker(options);

  if (typeof location.content !== 'undefined') {
    marker.setTitle(location.content.title);
    const infoWindow = new google.maps.InfoWindow({
      content: location.content.html
    });
    marker.addListener('click', () => {
      infoWindow.open(this.map, marker);
      this.infoWindow = infoWindow;
    });

    infoWindow.addListener('domready', () => {
      if (typeof location.content !== 'undefined' && typeof location.content.click !== 'undefined') {
        const element = document.getElementById(location.content.click.clickElementId);
        if (element) {
          element.addEventListener('click', location.content.click.clickFunction);
        }
      }
    });
  }
markers.push(marker);
}

现在我可以在设置我的制造商以正确导航后调用此函数：

        const content = (`
          <h5>${place.name}</h5>
          <p>${place.description}</p>
          <ion-button id='infoWindowButton'>Details</ion-button>
          `);
        markers.push({
            lat: place.lat, lng: place.lon, content: {
              title: place.name, html: content,
              click: {
                clickElementId: 'infoWindowButton', clickFunction: () => {
                  this.navCtrl.navigateForward(`/tabs/(map:place/${place.id}`);
                }
              }
            }
          });