почему PopOver перенаправить на просмотр?

Question

Я пытаюсь использовать popover внутри карты с помощью lib: OpenLayer.Я могу использовать PopOver, это конец.Я добавляю к этому панель навигации и изображение и / или, но когда я щелкаю по вкладкам или «> / <» (из начальной загрузки карусели), это перенаправляет на другой вид, а не на другие вкладки и / или изображение </p>

 <div class="row m-auto text-center" id="templateES">
    <div class="col-12 bg-gradient princing-item red">
      <div class="pricing-divider">

        <ng-container
          *ngIf="ImagenTestMostrar && ImagenTestMostrar?.$imagenes && ImagenTestMostrar?.$imagenes.length > 0">
          <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner" id="carouselParkMp">
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </ng-container>

      </div>

      <ng-container *ngIf="ImagenTestMostrar">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
              aria-selected="true">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href=".tab2" role="tab" aria-controls="profile"
              aria-selected="false">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href=".tab3" role="tab" aria-controls="contact"
              aria-selected="false">Contact</a>
          </li>
        </ul>

        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <div class="card-body bg-white mt-0 shadow">
              <ul class="list-unstyled mb-5 position-relative">
                <li><b>Precio: </b>{{ImagenTestMostrar?.$precio}} </li>
                <li><b>Tipo de cobro: </b> {{ImagenTestMostrar?.$unidad}}</li>
                <li><b>Tiempo de cobro: </b> {{ImagenTestMostrar?.$cantidad}} </li>
              </ul>
            </div>
          </div>
          <div class="tab-pane fade tab2" id="profile" role="tabpanel" aria-labelledby="profile-tab">div2</div>
          <div class="tab-pane fade tab3" id="contact" role="tabpanel" aria-labelledby="contact-tab">div3.</div>
        </div>
      </ng-container>
    </div>
  </div>

Машинопись:

map.on('click', (event) => {
      console.log(event);
      var feature = map.getFeaturesAtPixel(event.pixel);
      var element = popup.getElement();

      ($(element) as any).popover('dispose');

      if (feature != null) {
        console.log(element);
        var coord = event.coordinate;
        console.log(feature[0].values_);

        this.ImagenTestMostrar = new Imagen(feature[0].values_.attributes.datosPk);
        console.debug(this.ImagenTestMostrar);

        $(".imgDin").remove();
        for (let i = 0; i < this.ImagenTestMostrar.$imagenes.length; i++) {
          let carouserlItem = `<div class="carousel-item ${i == 0 ? 'active' : ''} imgDin">
                                <img class="d-block w-100" src="${this.ImagenTestMostrar.$imagenes[i]}" alt="First slide">
                              </div>`;
          console.log(carouserlItem);
          $(carouserlItem).appendTo("#carouselParkMp");
        }
        popup.setPosition(coord);
        //var element = popup.getElement();
        $(function () {
          ($(element) as any).popover({
            placement: 'left',
            content: function () {
              return $('#contentEs').html();
            },
            //template: template,
            html: true,
          });

          ($(element) as any).popover('show');
        });

      } else {
        console.debug("Es nulo!");
      }
    })

Пожалуйста, я новичок в веб-программировании, я не уверен, что если я буду практиковать мой код, я смогу сделать лучше.