Question

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

从给定的here示例中，我无法打开模态。

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

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

ediModalModule：

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

    }
}

EditModal Component

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



}

下面是我试图打开模态的组件。

from sikuli import *

运行此代码时出现错误

错误：没有EditModalComponent的提供程序！

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

请指导

由于

Answer 1

试试这样：

在下面的代码中，将NgbModule添加到entryComponents中的导入和EditModalComponent

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

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

1 个答案: