Javascript 使用（#myModal）显示引导模式。角度组件的模式（'；显示'；）

我有一个使用引导的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不是函数

我使用

npm install bootstrap

--save和

npm install jquery--save安装了引导和jquery

我甚至安装了ngx引导

但是，当我取消对导入jQuery的行的注释时，我得到了一个不同的错误：
错误类型错误：jQuery\uuuu WEBPACK\u IMPORTED\u MODULE\u 3\uuuuu（…）。modal不是一个函数
请检查angular.json文件以确保jQuery js文件包含在脚本数组中

“脚本”：[
“node_modules/jquery/dist/jquery.min.js”，
]

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

declare var$：any

这将允许您通过

$（'#确认'）.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>


没有数据
&时代；
没有找到任何数据。请展开搜索条件，然后重试。
好啊

希望这有帮助
 您不需要导入jquery…最好使用“角度材质”对话框。“更好地使用角材质对话框”。。。但他不使用材料，他使用Bootstrap。因为你已经安装了<代码> NGX Bootstrap 考虑使用它们。尽量不要混合使用jQuery和Angular，通常您不需要这样做。