Переключатель и модалы не работают в приложении Angular - PullRequest
Новая
       31

Переключатель и модалы не работают в приложении Angular

0 голосов
/ 30 мая 2019

Я новичок в Angular и у меня есть некоторые проблемы с переключением Bootstrap и модальным режимом работы.CSS-файлы BootStrap работают, потому что форма подбирает стиль;однако я считаю, что файлы JS не связаны должным образом.Пожалуйста, дайте мне знать, над чем я работаю.

Я установил NPM BootStrap и jQuery с помощью Angular CLI.После установки я связал файлы BootStrap и jQuery с файлом angular.json, чтобы приложение могло использовать библиотеки. 

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/LyndaChapter1",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            **"styles": [
              **"node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.css"**
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/jquery/dist/jquery.js"
            ],**
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },

Ожидаемый результат: переключение и модальное соединение должны работать Фактический результат: ни один не работает

Ответы [ 3 ]

1 голос
/ 05 июня 2019

Хотя я согласен с другими ответами здесь о том, чтобы не использовать jQuery, если вы собираетесь использовать его с начальной загрузкой или любой другой библиотекой, которая зависит от , вы должны сначала загрузить jQuery 1004 *.

Итак, чтобы решить вашу проблему, просто поместите зависимость jQuery выше зависимости начальной загрузки.

0 голосов
/ 30 мая 2019

jQuery - плохой выбор для запуска на Angular ... вам может понадобиться ngBootstrap

Там есть отличный шаблонный код, который вы можете использовать так же, как я сделал здесь

релевантно HTML : 

<code><ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="dateOfBirth">Date of birth</label>
        <div class="input-group">
          <input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
  </div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

<hr>

<pre>{{closeResult}}
<Ч />

Вы можете свернуть эту карту, нажав Toggle

релевантно TS : 

import {Component} from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-basic',
  templateUrl: './modal-basic.html'
})
export class NgbdModalBasic {
  closeResult: string;
  public isCollapsed = false;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
}
0 голосов
/ 30 мая 2019

Попробуйте добавить эти пакеты в файл package.json и выполните команду npm install --save на уровне файла Package.json.

/ * "@ ng-bootstrap / ng-bootstrap": "^ 4.1.0 "," bootstrap ":" ^ 4.3.1 "* /

...