angular - EntryComponents 在 Angular 6 中不起作用

Question

我在 Angular 6 中使用 ng-bootstrap 模态时遇到问题。

首先，我有 2 个模块:

AppModule 和 ComponentModule

这是ComponentModule:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ComponentRoutingModule,
    BsDropdownModule.forRoot(),
    TabsModule,
    PaginationModule.forRoot(),
    PopoverModule.forRoot(),
    ProgressbarModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot(),
    NgMultiSelectDropDownModule.forRoot(),
  ],
  declarations: [
   CategoryComponent,
   CourseComponent,
   ModalComponent,
   CategoryModalComponent,
  ],
  entryComponents: [CategoryModalComponent],
})
export class ComponentModule { }

ComponentModule 是我放置登录后将显示的组件的位置。

在 ComponentModule 中，我有一个类(class)组件:

@Component({
  selector: 'app-course',
  template: '<app-modal></app-modal>',
  styleUrls: ['./course.component.scss']
})
export class CourseComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

这是同一模块中的ModalComponent:

@Component({
  selector: 'app-modal',
  template: '<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(CategoryModalComponent);
    modalRef.componentInstance.name = 'World';
  }

  ngOnInit() {
  }

}

和

@Component({
  selector: 'app-category-modal',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `,
  styleUrls: ['./category-modal.component.scss']
})
export class CategoryModalComponent implements OnInit {

  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}

  ngOnInit() {
  }

}

我希望当我单击 ModalComponent 中的按钮时，我将显示一个模态，其内容位于 CategoryModalComponent 中。但它向我显示了一个错误:

ModalComponent.html:4 ERROR Error: No component factory found for CategoryModalComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.js:3256)
    at CodegenComponentFactoryResolver.push../node_modules/@angular/core/fesm5/core.js.CodegenComponentFactoryResolver.resolveComponentFactory (core.js:3291)
    at NgbModalStack.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModalStack._createFromComponent (ng-bootstrap.js:7643)
    at NgbModalStack.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModalStack._getContentRef (ng-bootstrap.js:7581)
    at NgbModalStack.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModalStack.open (ng-bootstrap.js:7444)

根据错误，我将其添加到ComponentModule中，但它不起作用。

您能给出解决这个问题的建议吗？

Answer 1

将 NgbModalModule 或 NgbModule 添加到您的 ComponentModule。

您的组件模块中没有 ngb 模块。

nb:在您的案例中尝试过并有效。

 import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 @NgModule({
   imports: [
    ...
    NgbModalModule
   ],
   ...
 })
 export class ComponentModule { }