jquery - 使用 jQuery 插件时，Angular 应用程序无法编译(Foundation 6 Accordion )

Question

我有一个 Angular 5 项目，其 Foundation 6 accordion menu (不要与普通 Accordion 混淆)。

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

在我的 Controller 中，我有一个非常简单的 ngOnInit 函数

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

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

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 正在使用常规 Accordion 的接口(interface)来对 Accordion 菜单元素进行此调用(常规 Accordion 文档为 here ，请注意，foundation() 的第二个参数是常规 Accordion 的 $options 对象，但文档说 Accordion 菜单的 jQuery 对象)

Answer 1

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

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

---

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

npm install --save @types/jquery

因此，您可以在组件/服务中导入 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')我也是，但我不确定。

---

现在您应该能够成功提供和/或构建您的应用。