Question

我有一个正在使用引导程序的Angular 8项目。我试图在组件的 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 --save和npm install jquery --save安装了bootstrap和jquery。

我什至安装了 ngx-bootstrap 。

但是，当我取消注释导入 jQuery 的行时，出现了另一个错误：ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_3__(...).modal is not a function

Answer 1

检查您的angular.json文件，以确保Jquery js文件包含在脚本数组中。

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

然后在组件TS文件中声明var $而不是尝试导入它：

declare var $: any;

这应该允许您通过以下方式触发模式

$('#confirm').modal();

还要确保HTML正确。模态示例：

<div class="modal fade" id="confirm" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="noDataModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background-color:lightgrey">
                <h5 class="modal-title" id="noDataModalLongTitle">No Data</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <i class="fas fa-check fa-4x mb-3 animated rotateIn"></i>
                No Data Found. Please expand your search criteria and try again.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Ok</button>
            </div>
        </div>
    </div>
</div>

希望这会有所帮助！

使用来自Angular组件的（#myModal）.modal（'show'）显示Bootstrap模态

1 个答案: