Saya memiliki aplikasi sudut 11.2.4 di mana saya harus menggunakan bootstrap (4.6.0) dan tema berbasis JQuery. Untuk menampilkan navbar di tampilan seluler, ada kode menggunakan navbar-collapse.

<nav class="main-menu navbar-expand-md navbar-light">
  <div class="navbar-header">
    <!-- Toggle Button -->
  </div>

  <div class="collapse navbar-collapse clearfix" id="navbarsupportedcontent">
    <ul class="navigation clearfix">
      <li class="dropdown"><a href="#">about</a></li>
      <li class="dropdown"><a href="#">services</a>
        <ul>
          <li><a href="#">service one</a></li>
          <li><a href="#">service two</a></li>
        </ul>
      </li>
      <li><a href="#">events</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </div>
</nav>

Dalam kode ini, mengklik elemen daftar akan menyebabkan halaman dimuat ulang dan diarahkan ke url yang terkait. Alih-alih menyegarkan halaman, saya ingin menerapkan pendekatan dan rute SPA sebagai gantinya. Saya telah mencoba AfterViewInit, AfterViewChecked tetapi tidak berfungsi.

ngAfterViewInit(): void {
  $('li a').on('click', ($event: any) => {
    $event.preventDefault();
  });
}

Saya menggunakan bootstrap dari @ng-bootstrap/ng-bootstrap: v9.0.2 dan skrip eksternal dengan urutan sebagai berikut:

 "scripts": [
  "jquery/dist/jquery.min.js",
  "src/app/shared/scripts/vendor/popper.min.js",
  "jquery-ui-dist/jquery-ui.js",
  "bootstrap/dist/js/bootstrap.js",
  "wowjs/dist/wow.min.js"
]
0
desertSniper87 17 Mei 2021, 23:49

1 menjawab

Jawaban Terbaik

Anda tidak perlu jQuery di sini. ng-bootstrap adalah port Angular bootstrap. Angular sendiri dan ng-bootstrap bersama-sama memiliki kemampuan yang cukup. Menggunakan jQuery dalam ekosistem ini hanya akan menyebabkan konflik antara kerangka kerja dan sakit kepala.

Upd: Saya melihat Anda tidak dapat menghindari penggunaan jQuery. Mungkin menghentikan propagasi akan membantu:

$event.stopPropagation();

Atau, saya akan mencoba menjelajahi kode sumber navbar jQuery untuk mengetahui bagaimana cara melampirkan event handler. Ini mungkin memberikan ide tentang cara menonaktifkan penangan tersebut.

1
IAfanasov 18 Mei 2021, 18:41