Question

我将mdb-angular2添加到我的角度应用程序，它工作得非常好，除了我似乎无法在按钮点击上显示模式，我复制了mdn网站上的确切示例但它仍然无法正常工作在我的应用程序内下面是我的html模板代码

<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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <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>

Answer 1

您是否在项目中包含了jQuery？ mdb是mdb-angular2 javascript组件所必需的，如模态，轮播，下拉等。您可以通过

安装jQuery

npm install --save jquery

安装jquery后，你在脚本中添加了对.angular-cli.json文件的引用，如下所示：

{
  ...,
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],
  ....
}

如果您不想安装jQuery并将其保存为依赖项，也可以将CDN引用添加到index.html文件中。

index.html

<html>
    <head>
        <title>...</title>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"> 
        </script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"> 
        </script>
    </head>
    <body>
        ...
    </body>
</html>

Answer 2

我实际上忘记了这个问题，但是对于那些可能会遇到相同问题的人，这是我的工作，我将此添加到了app-module的导入中， MDBBootstrapModule.forRoot()

mdb-angular2模态未显示

2 个答案: