在角度项目的引导中创建模态对象的实例时，引导下拉菜单不工作 [英] bootstrap dropdown not working when created an instance of Modal object in bootstrap in angular project

问题描述

在创建我们在节点模块中拥有的任何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">&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"), {});

一切都将正常工作，包括下拉列表。

推荐答案

我遇到过类似的问题。直接从"bootstrap"导入会导致下拉侦听器消失。

通过使用更深入的导入修复了该问题： 从‘bootstrap/js/dist/mode’导入模态；

我想弹出窗口也可以使用同样的方法：从‘bootstrap/js/dist/popover’导入弹出窗口；

转到类别：我不知道为什么，但它起作用了。

这篇关于在角度项目的引导中创建模态对象的实例时，引导下拉菜单不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！