entryComponents在Angular 6中不起作用

Question

我在角度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的位置。

在ComponentModule ，我有一个Course组件：

@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 { }

Answer 2

您应该在模块中添加“ CategoryModalComponent”作为声明和entryComponent。

https://stackblitz.com/angular/pxgjqrndxkoq