Question

我正在使用带有angular2的webpack。在运行时从ng2-bootstrap-modal导入bootstrapmodalmodule时失败。参考链接为：ng2-bootstrap-modal

这是我的档案：

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

Answer 1

你能尝试从Ng2Bootstrap导入ModalModule吗？

ModalModule.forRoot(),

从我这里跋涉

意外的价值＆＃39; BootstrapModalModule＆＃39;由模块导入的AppModule＆＃39;

1 个答案: