问题描述
我将 ng-bootstrap 5.3.1 与 Angular 8 和 bootstrap 4.3.1 一起使用。基本屏幕(视图)调用包含一个按钮的模态 (Modal1)。单击按钮时,另一个模态 (modal2) 应在同一模态窗口中打开。 模态作为组件传递。
第一个模式打开正常,但单击第二个按钮时返回以下错误: “没有找到 modal2component 的组件工厂。你把它添加到 @NgModule.entryComponents 了吗?”
我为他们创建了 module.ts 并尝试定义入口组件,但没有任何效果。任何帮助将不胜感激。
代码: app.module.ts
import { viewmodule } from './view/view.module';
import { editQualModule } from './view/editqual/editqual.module';
import { addqualmodule } from './view/addqual/addqual.module';
import { NgbModule,NgbModalModule,NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [
viewComponent,editQualComponent,addqualcomponent
],imports: [
browserModule,HttpClientModule,FormsModule,NgbModule,RouterModule.forRoot(routes),addqualmodule,viewmodule,editQualModule
],entryComponents: [addqualcomponent,editQualComponent],providers: [NgbActiveModal],bootstrap: [AppComponent],exports: [addqualcomponent,addqualmodule]
})
export class AppModule { }
view.module.ts
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [
NgbModule
]
})
export class viewmodule { }
editqual.module.ts
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [
NgbModule
]
})
export class editQualModule { }
addqual.module.ts
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [
NgbModule
]
})
export class addqualmodule { }
view.component.html
<button type=button class="btn btn-custom border" (click)="openAddModel(editQualmodal)" [disabled]="disableEditQual">Edit Qual's</button>
editqual.component.html
<button id="addqualbut" type=button class="btn btn-custom add" (click)="open(addQualmodal)"> > </button>
addqual.component.html
<div class="modal-header">
<h4 class="modal-title">Qualifier Add</h4>
<button type="button" class="close" data-dismiss="modal" (click)="activeModal.close('Close click')">×</button>
</div>
view.component.ts
import { Component,OnInit,ViewChildren,QueryList,TemplateRef,ViewChild } from '@angular/core';
import { NgbModal,ModaldismissReasons,NgbActiveModal,NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { editQualComponent} from './editqual/editqual.component';
import { addqualcomponent } from './addQual/addqual.component';
@Component({
selector: 'app-view',templateUrl: './view.component.html'
})
export class viewComponent {
constructor(private modalService: NgbModal){}
openAddModel(editQualmodal): void {
const modalRef = this.modalService.open(editQualComponent,{ centered: true,scrollable: true,backdrop: 'static',keyboard: false,size: 'xl' });
modalRef.componentInstance.objeditQualFields = this.objeditQualFields;
}
editqual.component.ts
open(name: any) {
const modalRef = this.modalService.open(addqualcomponent,size: 'xl' });
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)