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

Question

在创建我们在节点模块中拥有的任何 Modal、Popover 等实例后，Bootstrap 下拉菜单突然不起作用。我试图做的是利用 Modal 类中的 show 方法来打开引导模式。
我正在使用 Angular 为 12 的 bootstrap 4.6
下拉代码
`

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: import Popover from 'bootstrap/js/dist/popover';
转到类别:我不知道为什么，但它有效。