如何在 Angular 4 应用程序中包含 ng-Bootstrap Modal答案

【问题标题】：how to include ng-Bootsrap Modal in angular 4 application如何在 Angular 4 应用程序中包含 ng-Bootstrap Modal
【发布时间】：2017-09-26 10:24:00
【问题描述】：

我正在尝试在 Angular 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);
    }



}

运行此代码时出现错误

错误：没有 EditModalComponent 的提供者！

我不确定如何告诉 modalService 在模态中加载哪个模板。

请指导

谢谢

【问题讨论】：

我认为问题是你没有在模块文件中为你的组件添加 entryComponents 这样做 entryComponents: [ EditModalComponent ] in module.ts
你能在 Plunker 中创建和分享你的代码吗？？

标签： angular bootstrap-modal ng-bootstrap

【解决方案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 { }

【讨论】：