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

Angular 6 Bootstrap модальное всплывающее окно не работает

0 голосов
/ 11 октября 2018

Я получил приложение Angular 6 и пытаюсь заставить работать модальное всплывающее окно Bootstrap, но пока безуспешно.Я следую руководству по https://ng -bootstrap.github.io / # / components / modal / examples и читаю некоторые вопросы, опубликованные в stackedoverflow, но все же не повезло.Пока что, когда я нажимаю на кнопку, пользовательский интерфейс отображается на странице, но не в виде модального диалога.

Любая помощь очень ценится.Спасибо

Я установил jquery и поместил его в свой angular.json 

        "scripts": [
          "../node_modules/jquery/dist/jquery.min.js"

        ]

Я установил с помощью npm install --save @ ng-bootstrap / ng-bootstrap

Home.component.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}}

home.component.ts 

import {Component} from '@angular/core';

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

declare var $:any;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})

  export class HomeComponent {
    closeResult: string;

    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}`;
      }
    }
  }

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

введите описание изображения здесь

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

Я нашел кусочки информации в нескольких сообщениях stackoverflow, но это не устранило мои проблемы.Я наконец-то начал смотреть видео с YouTube, и это помогло мне преодолеть эти проблемы.

https://www.youtube.com/watch?v=xgc1vnEcPCw

Мне нужно добавить загрузочную зависимость.Надеюсь, это поможет кому-то еще.

0 голосов
/ 11 октября 2018

Можете ли вы также импортировать FormModule в app.module.ts файл 

  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule,
  ],

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

Пожалуйста, вставьте Chrome devtools error / warning, если есть, или ng serve/build error, если есть

...