在 Angular 项目的 bootstrap 中创建 Modal 对象的实例时，bootstrap 下拉菜单不起作用

Question

在创建我们在节点模块中拥有的任何 Modal、Popover 等实例后，Bootstrap 下拉菜单突然不起作用。我想做的是利用 Modal 类中的 show 方法来打开引导模式。

我正在使用 Bootstrap 4.6 和 Angular 12

下拉代码 `3

<div class="dropdown-menu notification-menu-container p-0 m-0">
    <div class="dropdown-body d-flex flex-column justify-content-between align-items-stretch">
        <div class="notification">
            <div class="card m-3">
                <div class="card-body">
                  This is some text within a card body.
                </div>
              </div>
        </div>
        <div class="notification">
            <div class="card m-3">
                <div class="card-body">
                  This is some text within a card body.
                </div>
              </div>
        </div>
        <div class="notification">
            <div class="card m-3">
                <div class="card-body">
                  This is some text within a card body.
                </div>
              </div>
        </div>
        <div class="notification">
            <div class="card m-3">
                <div class="card-body">
                  This is some text within a card body.
                </div>
              </div>
        </div>
        <div class="notification">
            <div class="card m-3">
                <div class="card-body">
                  This is some text within a card body.
                </div>
              </div>
        </div>
        <div class="notification-footer mt-3 w-100 bg-white align-self-center text-center">
            <a class="nav-link h6 text-info " routerLink="/notification"><u>View all Notifications</u></a>
        </div>
    </div>
</div>

`

模态代码

<div class="notification-container">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
      </button>
      
      <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" #notificationModal>
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
</div>

创建 bootstrap 实例的代码

`import { Component, OnInit, ViewChild } from '@angular/core';
import { Modal } from 'bootstrap';

@Component({
  selector: 'app-notification-home',
  templateUrl: './notification-home.component.html',
  styleUrls: ['./notification-home.component.scss']
})
export class NotificationHomeComponent implements OnInit {
  @ViewChild('notificationModal') content: any;
  //modalInstance: Bootstrap.Modal;
  constructor() { }

  ngOnInit(): void {
  }

  public open = ():void => {
    debugger
    this.content.open();
    //let xx = new Bootstrap.Popover(null, null)
    let xx = new Modal(document.getElementById("exampleModal"), {});
    // new Modal(document.getElementById("exampleModal"), 
    //  {
    //   backdrop: "static",
    //   keyboard: true
    //  });
    // this.modalInstance.show();
  }

}`

角度.json

"assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

该方法是从组件打开模式的正确方法吗？一旦我删除了

let xx = new Modal(document.getElementById("exampleModal"), {});

一切都会正常进行，包括下拉菜单。

Answer 1

我有类似的问题。直接从“bootstrap”导入会导致下拉侦听器消失。

通过使用更深层次的导入来修复它： import Modal from 'bootstrap/js/dist/modal';

我猜想 Popover 也可以使用同样的方法： import Popover from 'bootstrap/js/dist/popover';

转到类别：我不知道为什么，但它有效。