Question

<div class="modal fade" id="getUserDetails" tabindex="-1" role="dialog" aria-labelledby="getUserDetails">
  <div class="modal-dialog container2" role="document">
    test
  </div>
</div>


<button (click)="getUserDetails(participant.userId)" type="button" class="btn " data-toggle="modal" data-target="#getUserDetails">
  Detail
</button>

我的角度版本6

bootstrap第4版

按钮（单击）=＆＃34; getUserDetails（participant.userId）＆＃34; 正常工作。但是数据目标（绑定模态淡化）是不可见的。

我尝试设置JQuery并将JQuery导入angular.json。它仍然不起作用请帮帮我

Answer 1

1) Install bootstrap using npm

npm install bootstrap --save

2) Install JQUERY

npm install jquery --save

open .angular-cli.json this file are available on you angular directory open that file and add the path of bootstrap css, see the below example

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
           ],

    //than add div for model in your component html like below

    <div id="myModal" class="modal fade" role="dialog"><div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
<button  type="button" (click)="getUserDetails()" class="btn " data-toggle="modal" data-target="#myModal">
  Detail

Answer 2

请仔细执行以下步骤。您可能已经安装了引导程序，jquery和必需的依赖项。您的问题永远不会是组件样式和引导程序之间的冲突。请尝试以下操作，并告诉我。您可以点击2次来 (click)="getUserDetails(participant.userId);basicModal.show()"

第1步

npm i angular-bootstrap-md --save

第2步

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { MDBBootstrapModule } from 'angular-bootstrap-md';进入app.module和

第3步

imports: [
    MDBBootstrapModule.forRoot()
],
schemas: [ NO_ERRORS_SCHEMA ]

第4步：如果未更改，请确保在angular.json文件中将styleExt设置为“ scss”：

"schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }

步骤5：确保您有src/styles.scss。如果您使用的是src / styles.css，请将其重命名为.scss.

如果要更改现有项目中的样式，可以使用ng set defaults.styleExt scss

步骤6：将以下几行添加到angular.json：

    "styles": [
        "node_modules/font-awesome/scss/font-awesome.scss",
        "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
        "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
        "src/styles.scss"
    ],
    "scripts": [
          .....
    ],

第7步，将以下基本模式代码放入各自的标记模板中，然后尝试实现模式弹出窗口。

<button type="button" mdbBtn color="primary" class="relative waves-light" (click)="basicModal.show()" mdbWavesEffect>Launch demo modal</button>

<div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
        <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save changes</button>
      </div>
    </div>
  </div>
</div>

引用来自MDBootstrap

Answer 3

在我的脚本中添加

 "scripts": [
                        "node_modules/jquery/dist/jquery.min.js",
                        "node_modules/chart.js/dist/Chart.js",
                        "node_modules/hammerjs/hammer.min.js",
                        "node_modules/bootstrap/dist/js/bootstrap.min.js"
             ]

角度6

3 个答案: