jquery 从Angular组件使用(#myModal).modal('show')显示引导模式

rt4zxlrg 于 12个月前发布在 jQuery

关注(0)|答案(2)|浏览(88)

我有一个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

jquery

来源：https://stackoverflow.com/questions/57308606/show-bootstrap-modal-using-mymodal-modalshow-from-angular-component

2条答案

按热度按时间

pftdvrlh1#

检查angular.json文件，确保脚本数组中包含Jquery js文件。
第一个月
然后在组件TS文件中声明var $，而不是试图导入它：
declare var $: any;个
这应该允许您通过
$('#confirm').modal();个
同时确保HTML是正确的。示例Modal：

<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>

字符串
希望这对你有帮助！

赞(0）回复(0）举报 12个月前

bxpogfeg2#

您需要将bootstrap添加到angular.json脚本中
您需要安装bootstrap types

My solution is live here的
YOUR_COMPONENT_NAME.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>

字符串

YOUR_COMPONENT_NAME.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()
 }
}

型

赞(0）回复(0）举报 12个月前

我来回答

jquery 从Angular组件使用(#myModal).modal('show')显示引导模式

2条答案

字符串

相关问题

热门标签

最新问答