问题描述
在创建我们在节点模块中拥有的任何Modal、Popover等的实例后,Bootstrap下拉菜单突然不起作用。我尝试做的是利用Modal类中的show方法打开引导模式。我使用的是角为12的引导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">×</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"), {});
一切都将正常工作,包括下拉列表。
推荐答案
我遇到过类似的问题。直接从"bootstrap"导入会导致下拉侦听器消失。
通过使用更深入的导入修复了该问题: 从‘bootstrap/js/dist/mode’导入模态;我想弹出窗口也可以使用同样的方法:从‘bootstrap/js/dist/popover’导入弹出窗口;
转到类别:我不知道为什么,但它起作用了。