如何在角度4应用程序中包含ng-Bootsrap Modal

Question

我正在尝试在角度4应用程序中创建一个模式。为此，我使用了ng-bootstrap。

从给出的例子here我无法打开模式。

我的应用程序分为各种模块。 editModal是一个模块，editmodelComponent是该模块下的一个组件。

我想从另一个模块组件打开这个editmodelComponent。

ediModalModule：

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { EditModalComponent } from './edit-modal/edit-modal.component'; 

@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    declarations: [EditModalComponent], 
    exports: [EditModalComponent] 
}) 
export class EditModule { } 

EditModal组件

import { Component, OnInit, Input, Output, OnChanges, EventEmitter } from '@angular/core'; 
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; 

@Component({ 
    selector: 'edit-modal', 
    templateUrl: './edit-modal.component.html', 
    styleUrls: ['./edit-modal.component.css'] 

}) 
export class EditModalComponent implements OnInit { 


    constructor() { } 

    ngOnInit() { } 

    close() { 

    } 
} 

下面是我从中尝试打开该模式的组件。

import { Component, OnInit } from '@angular/core'; 
import { UserService } from '../../modules/shared-service/service/user.service'; 
import { ManageComponentStatusService } from '../../modules/shared-service/service/manage-component-status.service'; 
import { ISlimScrollOptions } from 'ng2-slimscroll'; 

import { Router, ActivatedRoute, Params } from '@angular/router'; 
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; 
import { EditModalComponent } from '...edit-modal/edit-blurb-modal.component' 

declare var $: any; 

@Component({ 
    selector: 'app-user', 
    templateUrl: './user.component.html', 
    styleUrls: ['./user.component.css'] 
}) 
export class UserComponent implements OnInit { 


    constructor(public userServ: UserService, public compStatus: ManageComponentStatusService,private modalService: NgbModal, private modal:EditModalComponent) { 

     this._route = route; 
    } 

    ngOnInit() { 


     $('#waterfall').NewWaterfall({ 
      width: 340, 
      delay: 100, 
     }); 

     this.compStatus.setComponentStatus(true, true, true); 
     this.userServ.setUserProfile(); 
     this.compStatus.setPlainHeader(true); 
     this.opts = { 
      barBackground: '#C9C9C9', 
      gridBackground: '#D9D9D9', 
      barBorderRadius: '1', 
      barWidth: '2', 
      gridWidth: '1' 
     };   

    }   

    edit(current: any) { 
    const modalRef = this.modalService.open(EditModalComponent); 
    } 



} 

上运行此代码我得到错误

Error: No provider for EditModalComponent!

我不知道如何告诉modalService的模式要加载的模板。

请指导

感谢

Answer 1

尝试这样的：

在这下面的代码将NgbModule增加进口和EditModalComponent内entryComponents

ediModalModule：

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 
import { EditModalComponent } from './edit-modal/edit-modal.component'; 

@NgModule({ 
    imports: [ 
     CommonModule, 
     NgbModule.forRoot() 
    ], 
    declarations: [EditModalComponent], 
    entryComponents: [EditModalComponent], 
    exports: [EditModalComponent] 
}) 
export class EditModule { }