Кнопка Ionic 4 / Angular 7 работает в Google Maps Marker InfoWindow

Question

Обновление : элемент на кнопке в информационном окне Google Maps под инспектором элементов выглядит следующим образом:

<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>

Почему?

Я поместил разрыв в @ ionic / angular / dist / directives / navigation / href-Delegate.js в строке 34 (HrefDelegate.prototype.onClick), и он ломается, если я использую кнопку на обычной странице (точно такой же текст), но не, если я нажимаю свою кнопку в InfoWindow карт Google.

---

Я пытаюсь пройтиrouterDirection (ионный) от маркера карт Google.Более общая проблема заключается в том, что я пытаюсь делать угловатые вещи в информационном окне.Пользователь нажимает на маркер, он показывает поле, содержащее кнопку, на которой есть 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, о котором я упоминал ранее.

@ViewChild(GoogleMapComponent) map?: GoogleMapComponent;

И в моем методе addMarkers в компоненте google-map он добавляет содержимое следующим образом:

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 и ссылку на него через HTML, который содержит идентификатор элемента.И я использую этот идентификатор элемента для передачи функции.

У меня есть свой тип для маркеров, который я передаю в мою функцию:

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

Так что я должен передать широту / долготу, и я могу предоставить дополнительный контент, который включает в себя заголовок и немного HTML для infoWindow, и если я хочу дополнительно настроить его, я могу включить элемент, по которому щелкают, и функцию, чтобы идти с ним.

Теперьниже приведена функция, которая принимает этот тип и работает с маркерами внутри цикла:

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}`);
                }
              }
            }
          });