角8中作为ngBootstrap模态内容的分量

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() {
    }
}

appModule：

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. 所显示的错误是因为您没有在条目组件中写入内容组件，但是您已经完成了

。

1. ，如果您只有两个组件，并且这是您的结构，而在AppModule中缺少一些其他点，如

引导: SpecialityComponent，

BrowserModule的进口

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