エラーが発生する理由がわかりません
compiler.js:2175 Uncaught Error: Can't resolve all parameters for ClauseListComponent: ([object Object], ?).
at syntaxError (compiler.js:2175)
at CompileMetadataResolver._getDependenciesMetadata (compiler.js:20399)
at CompileMetadataResolver._getTypeMetadata (compiler.js:20294)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:19923)
at CompileMetadataResolver._getEntryComponentMetadata (compiler.js:20494)
at compiler.js:20486
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getEntryComponentsFromProvider (compiler.js:20485)
at compiler.js:20456
at Array.forEach (<anonymous>)
私はngbModalを使用しようとしていますが、これが私がこれまでに行ったことです。
clause.module.ts
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [ModuleListComponent,ClauseListComponent,ModifyClauseComponent],
imports: [
NgbModule
clauselist.html
<ng-template #content let-modal >
<div class="modal-header">
<h4 class="h4Header" id="modal-basic-title">Title</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">
CheckMate!
</div>
<div class="modal-footer">
<button mat-flat-button class="text-btn" (click)="modal.close('Save click')">ENROLL NOW</button>
<button mat-flat-button class="text-btn" (click)="modal.close('Save click')">Later</button>
</div>
</ng-template>
<button mat-flat-button class="primary-btn marR16" (click)="open(content)">Modal dialog</button>
および。tsファイル
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
constructor(private service : OfferClauseService,private modalService: NgbModal) { }
open(content) {
this.modalService.open(content,{windowClass:'custom_modal'})
}
tsconfig
"lib": [
"es2018",
"dom"
]
よろしくお願いします!さらに説明が必要かどうかお問い合わせください。
コンポーネントにインジェクトするのではなく、NgModuleにインポートする必要があります。
import { ModalModule } from 'ngb-modal';
@NgModule({
imports: [
...
ModalModule,
],
削除する private modalService: NgbModal
コンストラクタから:
constructor(private service : OfferClauseService,private modalService: NgbModal) { }
代わりにModalManager
を追加します:
export class YourComponent {
@ViewChild('myModal') myModal;
private modalRef;
constructor(private modalService: ModalManager){}
openModal(){
this.modalRef = this.modalService.open(this.myModal, {
...
})
};
...
closeModal(){
this.modalService.close(this.modalRef);
//or this.modalRef.close();
}
}
モジュールのentryComponents
にダイアログコンポーネントを追加する必要があります。
@NgModule({
declarations: [
AppComponent, ModalComp
],
imports: [
...
ModalModule,
],
providers: [],
bootstrap: [AppComponent],
entryComponents: [ModalComp]
})