0

我将 ng-bootstrap 5.3.1 与 Angular 8 和 bootstrap 4.3.1 一起使用。基本屏幕（视图）调用包含一个按钮的模态（Modal1）。单击按钮时，应在同一模式窗口中打开另一个模式 (modal2)。模态被作为组件传递。

第一个模态打开正常，但单击第二个按钮时返回以下错误：“未找到 modal2component 的组件工厂。您是否将其添加到 @NgModule.entryComponents？”

我为他们创建了 module.ts 并尝试定义 entrycomponents 但没有任何效果。任何帮助将不胜感激。

代码： 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,
    NgbModalModule,
    RouterModule.forRoot(routes),
    addqualmodule,
    viewmodule,
    editQualModule
  ],
  entryComponents: [addqualcomponent, editQualComponent],
  providers: [NgbActiveModal],
  bootstrap: [AppComponent],
  exports: [addqualcomponent, addqualmodule]
})
export class AppModule { }

视图.module.ts

import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    NgbModule
  ]
})

export class viewmodule { }

编辑qual.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>

编辑qual.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')">&times;</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;
}

编辑qual.component.ts

open(name: any) {
    const modalRef = this.modalService.open(addqualcomponent, { centered: true, scrollable: true, backdrop: 'static', keyboard: false, size: 'xl' });
}
4

0 回答 0