我在网上尝试了很多方法,但我无法让它工作。这是我的组件。onSubmit,一个建议是使用 NgbActiveModal 关闭但我收到错误
“错误错误:未捕获(承诺):错误:StaticInjectorError(AppModule)[UserstuffComponent - > NgbActiveModal]:StaticInjectorError(平台:核心)[UserstuffComponent - > NgbActiveModal]:NullInjectorError:NgbActiveModal没有提供者!”
import {Component, ViewChild} from '@angular/core';
import {NgbModal, ModalDismissReasons, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {NgForm} from "@angular/forms";
@Component({
selector: 'ngbd-modal-basic',
templateUrl: './userstuff.component.html'
})
export class UserstuffComponent {
closeResult: string;
bookTitle;
constructor(private modalService: NgbModal, public ngbModalService: NgbActiveModal) {}
open(content) {
this.modalService.open(content).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
console.log(this.closeResult);
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
console.log(this.closeResult);
});
}
private getDismissReason(reason: any): void {
if (reason === ModalDismissReasons.ESC) {
console.log('by pressing ESC');
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
console.log('by clicking on a backdrop');
} else {
console.log(`with: ${reason}`);
}
}
onSubmit(form : NgForm) {
console.log(form.value);
this.ngbModalService.close();
}
}
这是我的html。
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Profile update</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×yo</span>
</button>
</div>
<div class="modal-body">
<form (ngSubmit)="onSubmit(borrowBook)" #borrowBook="ngForm">
<div class="form-group">
<label for="bookTitle">Title of book</label>
<input type="text" class="form-control" id="bookTitle" placeholder="Title of Book"
required [(ngModel)]="bookTitle" name="bookTitle">
</div>
<button type="submit" class="btn btn-default">Borrow!</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="c('with save')">Save</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
这是我导入到 app.module.ts 中的 user-view.module.ts。
@NgModule({
imports: [
CommonModule,
UserViewRoutingModule,
NgbModule.forRoot(),
FormsModule
],
declarations: [
UserViewComponent,
UserhomeComponent,
UserstuffComponent
]
})
export class UserViewModule { }