2017-03-02 65 views
0

我正在使用带有angular2的webpack。它在运行时从ng2-bootstrap-modal导入bootstrapmodalmodule失败。参考链接:ng2-bootstrap-modal由模块'AppModule'导入的意外值'BootstrapModalModule'

这是我的文件:

app.module.ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from "@angular/common"; 
import { BrowserModule } from '@angular/platform-browser'; 
import { BootstrapModalModule } from 'ng2-bootstrap-modal'; 
import { ConfirmComponent } from './shared/login/confirm.component'; 
import { AppComponent } from './app.component'; 


@NgModule({ 
    declarations: [ AppComponent, ConfirmComponent], 
    imports: [ CommonModule, BrowserModule, BootstrapModalModule ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

app.component.ts

import { Component } from '@angular/core'; 
import { ConfirmComponent } from './shared/login/confirm.component'; 
import { DialogService } from "ng2-bootstrap-modal"; 


@Component({ 
    selector: 'pm-app', 
    templateUrl: './app.component.html' 

}) 
export class AppComponent { 
    constructor(private dialogService:DialogService) {} 
     showConfirm() { 
      let disposable = this.dialogService.addDialog(ConfirmComponent, { 
       title:'Confirm title', 
       message:'Confirm message'}) 
       .subscribe((isConfirmed)=>{ 
        //We get dialog result 
        if(isConfirmed) { 
         alert('accepted'); 
        } 
        else { 
         alert('declined'); 
        } 
       }); 
      //We can close dialog calling disposable.unsubscribe(); 
      //If dialog was not closed manually close it by timeout 
      // setTimeout(()=>{ 
      //  disposable.unsubscribe(); 
      // },10000); 
     } 
} 

confirm.component.ts

import { Component } from '@angular/core'; 
import { DialogComponent, DialogService } from "ng2-bootstrap-modal"; 


@Component({ selector: 'confirm', 
    template: `<div class="modal-content"> 
        <div class="modal-header"> 
        <button type="button" class="close" (click)="close()" >&times;</button> 
        <h4 class="modal-title">{{title || 'Confirm'}}</h4> 
        </div> 
        <div class="modal-body"> 
        <p>{{message || 'Are you sure?'}}</p> 
        </div> 
        <div class="modal-footer"> 
        <button type="button" class="btn btn-primary" (click)="confirm()">OK</button> 
        <button type="button" class="btn btn-default" (click)="close()" >Cancel</button> 
        </div> 
       </div>` 
}) 
export class ConfirmComponent extends DialogComponent { 
    constructor(dialogService: DialogService) { 
    super(dialogService); 
    } 
    confirm() { 
    // we set dialog result as true on click on confirm button, 
    // then we can get dialog result from caller code 
    this.result = true; 
    this.close(); 
    } 
} 
+0

你可以尝试将其导入这样'BootstrapModalModule.forRoot()'? – echonax

+0

它给我编译错误'forRoot不存在' – Unnati

回答

0

你可以尝试从Ng2Bootstrap中导入ModalModule吗?

ModalModule.forRoot(), 

它wokking形成我

+0

你可以分享它的工作示例与webpack? – Unnati

+0

对不起,但我不能因为它是一个生产应用程序,但这里是我的模块 import“ModalModule”from“ng2-bootstrap”; 在导入数组中导入的模块: ModalModule.forRoot(),并且如果您不在ng2 boostrap最新版本中,请尝试升级它 – Uak

相关问题