使用jQuery插件时，Angular应用程序无法编译(基础6 accordion)
我有一个带有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 & 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服务中得到了以下错误。
src/app/form/nav-components/side-nav/side-nav.component.ts(64,43)：错误选项中出现
错误:不能将'JQuery‘类型的参数赋给'string | Options’类型的参数。类型“”JQuery“”与类型“”Options“”没有相同的属性。“
看起来TS在accordion菜单元素上的这个调用中使用了常规accordion的接口(常规accordion文档是基础的，请注意，here ()的第二个参数是常规accordion的$options对象，但文档说的是accordion菜单的jQuery对象)
回答 3
Stack Overflow用户
发布于 2018-05-31 03:20:04
<HTMLElement> 的类型不能与jQuery， 一起使用，因为它不是HTML元素，它是一个jQuery元素:即E214E115和<代码>E216的包装器
当我试图在我的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')，但我不确定。
现在你应该能够成功地服务和/或构建你的应用程序了。
Stack Overflow用户
发布于 2018-05-09 00:59:42
这是我的观点。该函数需要一个字符串，但您传递的是Jquery对象。基础本身已经基于jQuery，所以您不需要添加jQuery对象。只需将目标指定为字符串即可。所以你应该这样做
ngOnInit() {
$('#sidenav-list').foundation('down', '#personalPages');
}Stack Overflow用户
发布于 2018-06-01 07:02:49
关键是编译器使用typescript definition文件通过typescript编译您的应用程序。所以一旦你使用了jquery插件，你就应该查找它的.d.ts类型的文件。
我做了一些研究，找到了你需要的类型文件。
按照安装步骤操作后，请确保使用与@types文件匹配的正确版本的js插件。
https://stackoverflow.com/questions/50234980
复制相似问题