组件作为 ngBootstrap 模态内容在 angular 8

Question

我正在尝试使用组件作为内容制作模态，但出现此错误：

找不到 AddLessonComponent 的组件工厂。 你把它添加到@NgModule.entryComponents 了吗？

调用者组件 html：

<button class="btn btn-primary dark" (click)="addLessons()">הוסף שיעורים</button>

调用者组件 ts：

import { Component, OnInit, Input, Output, EventEmitter, NgModule } from '@angular/core';
import { NgbModalConfig, NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { AddLessonComponent } from '../add-lesson/add-lesson.component';

@Component({
  selector: 'app-speciality',
  templateUrl: './speciality.component.html',
  styleUrls: ['./speciality.component.scss'],
  providers: [NgbModalConfig, NgbModal]
})
export class SpecialityComponent implements OnInit {
  constructor(private modalService: NgbModal)
  ngOnInit() {}
  addLessons() {
    const modalRe = this.modalService.open(AddLessonComponent);
    modalRe.componentInstance.name = 'World';
  }
}

内容组件html：

<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>

内容组件 ts：

import { Component, OnInit, Inject, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-add-lesson',
  templateUrl: './add-lesson.component.html',
  styleUrls: ['./add-lesson.component.scss']
})
export class AddLessonComponent implements OnInit {

    @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
    ngOnInit() {
    }
}

应用模块：

import { NgModule, Component } from '@angular/core';
import { NgbModule,NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
import { SpecialityComponent } from './COMPONENTS/speciality/speciality.component';
import { AddLessonComponent } from './components/add-lesson/add-lesson.component';


@NgModule({
  declarations: [
   SpecialityComponent,
   AddLessonComponent,
  ],
  imports: [
 NgbModule,NgbModalModule
  ],
  entryComponents: [AddLessonComponent]
})
export class AppModule { }

Answer 1

请检查以下链接：

https://stackblitz.com/edit/angular-nd5ihf

1. 据我所知，您所显示的错误是因为您没有在 entry 组件中编写内容组件但您已经完成了

2. 如果您只有两个组件并且这是您的结构，那么 AppModule 中缺少其他一些点，例如

   引导程序：[ SpecialityComponent ]，

导入 BrowserModule

我刚刚更新了 AppModule，您的代码运行良好。