使用 Angular 组件中的 (#myModal).modal('show') 显示 Bootstrap 模态

Question

我有一个使用 bootstrap 的 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>

希望这有帮助！

Answer 2

• 您需要将 bootstrap 添加到您的 angular.json 脚本中
• 您需要安装引导类型

我的解决方案在这里

您的组件名称.component.html

<button (click)="submit()">Submit</button>

<div #yourSelectorName class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

============================

您的组件名称.component.ts

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import * as bootstrap from 'bootstrap';

export class <your-component-name>Component {
 @ViewChild('yourSelectorName') modalRef = {} as ElementRef;

 submit() {
  const modal = new bootstrap.Modal(this.modalRef.nativeElement)
  modal.show()
 }
}