我有一个Angular 8项目正在使用bootstrap。我试图使用组件的 Typescript 文件中的$('myModal').modal('show')
显示组件内的模态对话框。
下面是我的组件的文件:
import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
// import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';
@Component({
selector: 'app-xyz',
templateUrl: './xyz.component.html',
styleUrls: ['./xyz.css']
})
export class XyzComponent implements OnInit {
constructor(private router: Router) {
}
ngOnInit() {
}
submit() {
$('#confirm').modal('show');
}
}
字符串
在单击时调用submit()函数时,我得到以下错误:ERROR TypeError: $(...).modal is not a function
我使用npm install bootstrap
--保存和npm install jquery --save
安装了bootstrap和jquery。
我甚至安装了 ngx-bootstrap。
然而,当我取消注解导入 jQuery 的行时,我得到了一个不同的错误:ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_3__(...).modal is not a function
2条答案
按热度按时间pftdvrlh1#
检查angular.json文件,确保脚本数组中包含Jquery js文件。
第一个月
然后在组件TS文件中声明var $,而不是试图导入它:
declare var $: any;
个这应该允许您通过
$('#confirm').modal();
个同时确保HTML是正确的。示例Modal:
字符串
希望这对你有帮助!
bxpogfeg2#
My solution is live here的
YOUR_COMPONENT_NAME.component.html
字符串
YOUR_COMPONENT_NAME.component.ts
型