как включить ng-Bootsrap Modal в приложение angular 4

Я пытаюсь создать модальное окно в приложении angular 4. Для этого я использую ng-bootstrap.

В приведенном примере здесь я не могу открыть модальный .

Мое приложение разбито на разные модули. 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);
    }



}

при запуске этого кода я получаю сообщение об ошибке

Ошибка: нет поставщика для EditModalComponent!

Я не уверен, как сообщить modalService, какой шаблон загружать в модальном окне.

Пожалуйста, направьте

Спасибо


angular bootstrap-modal ng-bootstrap
person Shruti Nair    schedule 26.09.2017    source источник
comment
Я думаю, проблема в том, что вы не добавили entryComponents для вашего компонента в файл модуля, как это entryComponents: [EditModalComponent] в module.ts   -  person Chandru    schedule 26.09.2017
comment
Можете ли вы создать и поделиться своим кодом в Plunker?   -  person Chandru    schedule 26.09.2017

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте вот так:

В этом ниже коде добавит 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 { }
person Chandru    schedule 26.09.2017