wie man ng-Bootsrap Modal in eckige 4 Anwendung einfügt

Question

Ich versuche, ein Modal in eckigen 4 Anwendung zu erstellen.Für das verwende ich ng-Bootstrap.

Aus dem Beispiel here kann ich das Modal nicht öffnen.

Meine Anwendung ist in verschiedene Module unterteilt. Das editModal ist ein Modul und editmodelComponent ist eine Komponente unter diesem Modul.

Ich möchte diese editmodelComponent aus einer anderen Modulkomponente öffnen.

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 Komponente

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

    } 
} 

Unten ist die Komponente, von der ich versuche, den Modal zu öffnen.

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); 
    } 



} 

auf diesen Code ausgeführt wird erhalte ich die Fehler

Error: No provider for EditModalComponent!

Ich bin nicht sicher, wie die modalService zu erzählen, die Vorlage in der modal zu laden.

Bitte führen

Dank

Answer 1

wie Try this:

In diesem Code unten wird NgbModule die Einfuhr und EditModalComponent innerhalb entryComponents hinzufügen

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