从组件打开 Angular Bootstrap 模式

Question

我正在尝试使用 angular bootstrap 设置一个简单的模式。但是我运行这个错误 :

 "ERROR Error: No component factory found for ModalContentComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError"

我已经导入了模块，但仍然无法正常工作。我从文档 HERE and also looked at this Whosebug question .

开始

这是我的 app.module :

import { FormPoster } from './services/form-poster.service';
import { DatepickerModule } from 'ngx-bootstrap/datepicker';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { RatingModule } from 'ngx-bootstrap/rating';
import { AddGameComponent } from './add-game/add-game.component';
import { ModalModule } from 'ngx-bootstrap';

@NgModule({
declarations: [
AppComponent,
EmployeeComponent,
EmployeeTitlePipe,
EmployeeListComponent,
EmployeeCountComponent,
HomeComponentComponent,
PageNotFoundComponent,
AddEmployeeComponent,
AddGameComponent,        
],

imports: [
 BrowserModule,
 BrowserAnimationsModule,
 FormsModule,
 HttpModule,
 ButtonsModule.forRoot(),
 RatingModule.forRoot(),
 ModalModule.forRoot(),
 DatepickerModule.forRoot(),
 RouterModule.forRoot(appRoutes)
 ],
 providers: [EmployeeService, FormPoster],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

Answer 1

在模块文件的 entryComponent 内添加 ModalContentComponent。

喜欢以下：

entryComponents: [
    ModalContentComponent
]

Answer 2

将组件作为 entryComponents AND 在 declarations.

中添加到模块中

Answer 3

您应该将您的组件添加到 @NgModule 和 entryComponents

第 1 步：将组件导入 app.module.ts

import { CatalogDetailsComponent, ModalContentComponent } from './catalog-details/catalog-details.component'

第 2 步：将导入的模块添加到 @NgModule

@NgModule({
  declarations: [
    AppComponent,
    ModalContentComponent 
  ],

第 3 步：在 @NgModule 下方添加 entryComponents（如果不存在）并在那里添加导入的组件

  entryComponents: [
    ModalContentComponent
  ],

从组件打开 Angular Bootstrap 模式

Open Angular Bootstrap modal from component

bootstrap-modal

angular-module

angular