Не работает модальная всплывающая кнопка в углу 6 - PullRequest
Новая
       20

Не работает модальная всплывающая кнопка в углу 6

0 голосов
/ 23 мая 2018 
<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

загрузочная версия 4

кнопка (щелчок) = "getUserDetails (Particip.UserId)" нормально работает.Но data-target (связанный модальное затухание) не виден.

Я попытался настроить JQuery и импортировать JQuery в angular.json.все же это не работает, пожалуйста, помогите мне

Ответы [ 3 ]

0 голосов
/ 14 августа 2018

Тщательно выполните следующие шаги.Возможно, вы уже установили загрузчик, 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: Убедитесь, что для styleExt в файле angular.json установлено значение "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

0 голосов
/ 15 августа 2018

В своих скриптах я добавляю 

 "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"
             ]
0 голосов
/ 23 мая 2018 
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 </button>
...