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

创建引导实例的代码

`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"导入Modal；

我想Popover也可以使用同样的方法：从"bootstrap/js/dist/Popover"导入Popover；

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