bootstrap 在 angular 项目的 bootstrap 中创建模态对象实例时下拉菜单不起作用

Question

Bootstrap 下拉列表在创建我们在节点模块中拥有的任何模态框、弹出框等实例后突然不起作用。我想做的是利用 Modal class 中的 show 方法打开 bootstrap 模态。

我正在使用 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();
  }

}`

angular.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' 导入会导致下拉监听器消失。

通过使用更深入的导入修复了它：从 'bootstrap/js/dist/modal';

导入模态

我猜同样可以用于 Popovers：从 'bootstrap/js/dist/popover';

导入 Popover

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

bootstrap 在 angular 项目的 bootstrap 中创建模态对象实例时下拉菜单不起作用

bootstrap dropdown not working when created an instance of Modal object in bootstrap in angular project

drop-down-menu

bootstrap-modal

bootstrap-4

angular