角度 6 引导模式弹出窗口不起作用

Question

我得到了一个 Angular 6 应用程序并试图让 Bootstrap 模式弹出窗口工作，但到目前为止没有运气。我按照 https://ng-bootstrap.github.io/#/components/modal/examples 上的教程阅读了堆栈溢出上发布的一些问题，但仍然没有运气。到目前为止，当我单击按钮时，UI 显示在页面上，但不显示为模式对话框。

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

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

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

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

首页.组件.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 { }

在此处输入图像描述

Answer 1

我的问题是：

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"
]

Answer 2

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

？

imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
NgbModule,
],
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

Answer 3

我在几个堆栈溢出帖子上找到了一些信息，但它没有解决我的问题。 我终于开始看YouTube视频，这有助于我解决这个问题。

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

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