如何在角度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 { }