.modal() 函数在角度 8 中不起作用

Question

单击时，"$("#Popup").modal('show')"不起作用。

.HTML

<a class="btn-profile-login" data-target="#Popup" (click)="loginBtn()">{{SignText}}</a>

TS

import { Component, OnInit, ViewChild } from '@angular/core';
import * as $ from 'jquery';
import * as bootstrap from "bootstrap"; 
export class SampleComponent implements OnInit{
loginBtn() {
$("#Popup").modal('show');
}
}

错误信息：

类型错误： jquery__WEBPACK_IMPORTED_MODULE_9__(...(.模态不是 功能

Answer 1

您可以按照以下步骤操作

npm install jquery --save
npm install @types/jquery --save

然后在 architect => 构建 angular.json 文件的脚本部分，我们为 jquery lib 添加路径

"scripts": [
"node_modules/jquery/dist/jquery.min.js"
]

然后修改 tsconfig.app.json

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": ["jquery"] // addd jquery here
},
"exclude": ["test.ts", "**/*.spec.ts"]
}

然后你可以删除这个导入，因为你已经有jquery的类型定义

。

import * as $ from 'jquery';

Answer 2

使用 ngx-bootstrap https://valor-software.com/ngx-bootstrap/它是不需要 jQuery 的 Angular Bootstrap 组件。这是将Bootstrap与Angular一起使用的官方方式，您应该尽可能避免在角度应用程序中包含jquery

。万事如意。

Answer 3

您需要在index.html和component中包含jQuery

declare var $: any;

Answer 4

"scripts": [ "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

这在angular.json中对我有用