Angular 应用在使用 jQuery 插件时无法编译（Foundation 6 手风琴）

Question

我有一个带有 Foundation 6 accordion menu 的 Angular 5 项目（不要与普通手风琴混淆）。

<ul id="sidenav-list" class="vertical menu accordion-menu" data-accordion-menu data-multi-open="false">
  <li [ngClass]="navSections.personalAndIncome.statusClass">
  <a (click)="handleUpdateClassesOnSectionNavigate('personalAndIncome')" data-toggle="tab" title="Personal and Income">
    <span [ngClass]="navSections.personalAndIncome.navIconClass"></span>
    <span class="round-tabs one">Personal &amp; Income</span>
  </a>

  <!-- Personal and Income Pages -->
  <ul id="personalPages" class="menu vertical nested" [ngClass]="navSections.personalAndIncome.expandedClass">

    <li>
      <a [ngClass]="navSections.personalAndIncome.pages.profile.statusClass" routerLink="personal-and-income/profile" title="Profile">
        <span class="round-tabs one">Profile</span>
        <span [ngClass]="navSections.personalAndIncome.pages.profile.statusIconClass"></span>
      </a>
    </li>

    ...
  </ul>
</ul>

在我的控制器中，我有一个非常简单的 ngOnInit 函数

ngOnInit() {
  $('#sidenav-list').foundation('down', $('#personalPages'));    
}

此代码运行良好且工作完美 - personalPages 子列表按预期展开。但是我从 ng serve 收到以下错误。

ERROR in src/app/form/nav-components/side-nav/side-nav.component.ts(64,43): error TS2345: Argument of type 'JQuery' is not assignable to parameter of type 'string | Options'. Type 'JQuery' has no properties in common with type 'Options'.

看起来 TS 正在使用常规手风琴的接口来调用手风琴菜单元素（常规手风琴文档是 here，请注意 foundation() 的第二个参数是一个 $options 对象普通手风琴，但文档说手风琴菜单有一个 jQuery 对象）

Answer 1

这是我的观点。该函数需要一个字符串，但您传递的是 Jquery 对象。 Foundation 本身已经基于 jQuery，因此您不需要添加 jQuery 对象。您只需要将目标指定为字符串。所以你应该这样做

ngOnInit() {
  $('#sidenav-list').foundation('down', '#personalPages');    
}

Answer 2

类型<HTMLElement> 不能与jQuery一起使用，因为它不是HTML元素，它是一个jQuery元素：也就是说，围绕一个HTMLElement.

的包装器

当我尝试在我的 Angular 应用程序中使用 jQuery 插件（日期选择器）时，这也让我很头疼。

首先，确保安装了 jquery 类型：

npm install --save @types/jquery

因此您可以在 component/service 中导入 jQuery，并有 $ 可用：

import 'jquery';

下一步，确保 jQuery 和你的基础插件都添加到你的 Angular 应用程序，对于 Angular-cli 你可以使用 angular-cli.json 文件，并且对于非 cli Angular:

应该有一些类似的东西

...
"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../some/path/to/foundation.js"
],
...

第三，要跳过整个 HTMLElement 错误内容，将选择器包装在 (...) 中并为其输入 any:

// Use either this
(<any> $('#sidenav-list')).foundation(...);

// Or this
($('#sidenav-list') as any).foundation(...);

您可能还需要包装 $('#personalPages')，但我不确定。

现在您应该能够成功地提供and/or构建您的应用程序。

Answer 3

重点是编译器使用 typescript definition 文件来使用打字稿编译您的应用程序。所以一旦你使用 jquery 插件，你应该查找它的 .d.ts 类型文件。

我做了一些研究，找到了您需要的类型文件。

npm foundation

按照安装步骤操作后，请确保使用与 @types 文件匹配的正确版本的 js 插件。

Angular 应用在使用 jQuery 插件时无法编译（Foundation 6 手风琴）

Angular app unable to compile when using a jQuery plugin (Foundation 6 accordion)

jquery

zurb-foundation

typescript

angular