防止 Angular 11 应用程序中的 JQuery 默认行为

Posted 2023-05-08

【中文标题】防止 Angular 11 应用程序中的 JQuery 默认行为

【英文标题】：Preventing JQuery default behavior in Angular 11 app

【发布时间】：2021-08-07 03:19:54

【问题描述】：

我有一个 Angular 11.2.4 应用程序，我必须在其中使用引导程序 (4.6.0) 和基于 JQuery 的主题。对于在移动视图中显示导航栏，有一个代码使用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>

在此代码中，单击列表元素将导致页面重新加载并路由到关联的 url。我不想刷新页面，而是想实现一个 SPA 方法并路由到。我试过 AfterViewInit，AfterViewChecked 但它不起作用。

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

我按以下顺序使用来自@ng-bootstrap/ng-bootstrap: v9.0.2 的引导程序和外部脚本：

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

【参考方案1】：

这里不需要 jQuery。 ng-bootstrap 是 bootstrap 的 Angular 端口。 Angular 本身和 ng-bootstrap 一起拥有足够的能力。在这个生态系统中使用 jQuery 只会导致框架之间的冲突和令人头疼的问题。

更新： 我看到你无法避免使用 jQuery。也许停止传播会有所帮助：

$event.stopPropagation();

或者，我会尝试探索 jQuery 导航栏源代码，以了解它是如何附加事件处理程序的。它可能会提供有关如何禁用这些处理程序的想法。

【讨论】：

Brother 我试图将这一点传达给我的客户，但他坚持我们使用那个特定的主题（为 wordpress 编写的）。我无法使用角度 nativeElement 模拟特定行为。

%) 真可惜。我希望你的痛苦不会持续太久（：

我用想法更新了答案。可能有效或成为研究的起点（：