ฉันต้องการเพิ่ม Modal Bootstrap ให้กับ Angular Project ของฉัน ดังนั้นฉันจึงติดตั้ง ng bootstrap โดยใช้ npm install --save @ng-bootstrap/ng-bootstrap จากนั้นบูตสแตรปโดยใช้ npm install [email protected]
เมื่อฉันเพิ่มประโยคนี้ NgbModule.forRoot() ภายใต้การนำเข้าใน app.module.ts มันทำให้เกิดข้อผิดพลาด Property 'forRoot' ไม่มีอยู่ในประเภท 'typeof NgbModule'
อย่างไรก็ตาม ฉันพยายามลบ forRoot() และนำเข้าเฉพาะ NdbModule และรันแอปพลิเคชันของฉัน แต่มันให้ข้อผิดพลาดดังต่อไปนี้
เมื่อฉันค้นหาทางออนไลน์เกี่ยวกับวิธีลบข้อผิดพลาดข้างต้น วิธีแก้ไขที่ฉันได้รับคือเพิ่ม forRoot() แต่มันกำลังให้ข้อผิดพลาดคุณสมบัติ 'forRoot' ไม่มีอยู่ในประเภท 'typeof NgbModule'
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
@NgModule({
declarations: [
AppComponent,
LoginComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
เข้าสู่ระบบ.component.ts:
import { Component, OnInit } from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
title = 'appBootstrap';
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}`;
}
}
ngOnInit() {
}
}
เข้าสู่ระบบ.component.html:
<h1>Modal Popup Example</h1>
<button class="btn btn-lg btn-outline-primary" (click)="open(mymodal)">Open My Modal</button>
<ng-template #mymodal let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Bootstrap Modal</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is a sample modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Ok</button>
</div>
</ng-template>
ดัชนี.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testproject</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<app-root></app-root>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
เวอร์ชันเชิงมุม: Angular CLI: 8.0.6 โหนด: 12.19.0 ระบบปฏิบัติการ: win32 x64 Angular: 8.0.3
นี่เป็นครั้งแรกที่ฉันโพสต์คำถามใน Stackoverflow โปรดแนะนำหากฉันพลาดรายละเอียดใด ๆ
