Question

我有一个Angular 6应用程序，试图使Bootstrap模态弹出窗口正常工作，但到目前为止还没有运气。我按照https://ng-bootstrap.github.io/#/components/modal/examples上的教程进行操作，并阅读了关于stackedoverflow所发布的一些问题，但是仍然没有运气。到目前为止，当我单击按钮时，UI会显示在页面上，而不是模式对话框。

任何帮助将不胜感激。谢谢

我安装了jquery并将其放在我的angular.json中

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

        ]

我安装了 npm install --save @ ng-bootstrap / ng-bootstrap

Home.component.html

<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}}</pre>

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 { }

enter image description here

Answer 1

您还可以在FormModule文件中导入app.module.ts

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

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

请粘贴chrome devtools错误/警告（如有）或ng serve/build错误（如有）

Answer 2

我在几个stackoverflow帖子中发现了一些信息，但是并没有解决我的问题。我终于开始研究youtube vid，这帮助我克服了这个问题。

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

我需要添加引导程序依赖项。希望这对其他人有帮助。

Answer 3

我的问题出在：

angular.json仅更改project中包含的脚本文件的排序。

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

要这样：

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

Angular 6 Bootstrap模式弹出窗口不起作用

3 个答案: