無法解析BsModalService的所有參數

Question

我正在向我的spfx angular 2應用程序添加模態。我試圖按照ngx-bootstrap-modal到http://valor-software.com/ngx-bootstrap/#/modals。但我收到此錯誤：

Unhandled Promise rejection: Can't resolve all parameters for AppComponent: (?). ; Zone: <root> ; Task: 

這是我的代碼如下所示：

的package.json

{ 
    "name": "our-applications", 
    "version": "0.0.1", 
    "private": true, 
    "engines": { 
    "node": ">=0.10.0" 
    }, 
    "dependencies": { 
    "@angular/common": "^2.4.4", 
    "@angular/compiler": "^2.4.4", 
    "@angular/core": "^2.4.4", 
    "@angular/forms": "^2.4.4", 
    "@angular/http": "^2.4.4", 
    "@angular/platform-browser": "^2.4.4", 
    "@angular/platform-browser-dynamic": "^2.4.4", 
    "@angular/router": "^3.4.4", 
    "@angular/upgrade": "^2.4.4", 
    "@microsoft/sp-client-base": "~1.0.0", 
    "@microsoft/sp-client-preview": "~1.0.0", 
    "@microsoft/sp-core-library": "~1.0.0", 
    "@microsoft/sp-webpart-base": "~1.0.0", 
    "@types/webpack-env": ">=1.12.1 <1.14.0", 
    "angular2-modal": "^3.0.1", 
    "ng2-modal": "0.0.25", 
    "ngx-bootstrap": "^1.8.1", 
    "reflect-metadata": "^0.1.9", 
    "rxjs": "^5.0.3", 
    "sp-pnp-js": "^2.0.1", 
    "zone.js": "^0.7.6" 
    }, 
    "devDependencies": { 
    "@microsoft/sp-build-web": "~1.0.0", 
    "@microsoft/sp-module-interfaces": "~1.0.0", 
    "@microsoft/sp-webpart-workbench": "~1.0.0", 
    "@types/chai": "^>=3.4.34 <3.6.0", 
    "@types/mocha": ">=2.2.33 <2.6.0", 
    "gulp": "~3.9.1" 
    }, 
    "scripts": { 
    "build": "gulp bundle", 
    "clean": "gulp clean", 
    "test": "gulp test" 
    } 
} 

我的HTML調用該函數：

<button (click)="addApp();" class="ms-Button ms-Button--primary"> 
      <span class="ms-Button-label">Add Application</span> 
     </button> 

我的app.component.js的片段

import { Component, OnInit,ViewEncapsulation, ViewContainerRef } from '@angular/core'; 
import { AppSettings } from './shared/app.settings'; 
import { IApplicationEntity } from './shared/app.entities'; 
import { BsModalService } from 'ngx-bootstrap/modal'; 
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class'; 

export class AppComponent implements OnInit { 
    bsModalRef: BsModalRef; 

    constructor(private modalService: BsModalService) {} 

    public addApp() { 
     console.log("open the modal"); 
     let list = ['Open a modal with component', 'Pass your data', 'Do something else', '...']; 
     this.bsModalRef = this.modalService.show(ModalContentComponent); 
     this.bsModalRef.content.title = 'Modal with component'; 
     this.bsModalRef.content.list = list; 
    } 
} 

，這是我app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { ModalModule } from 'angular2-modal'; 
import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap'; 
import { AppComponent } from './app.component'; 
import { AppSettings } from './shared/app.settings'; 
import { AppLoadingComponent } from './shared/loading/app.loading'; 
import { AppNotifyComponent } from './shared/notify/app.notify'; 
import { BsModalService } from 'ngx-bootstrap/modal'; 


@NgModule({ 
    imports: [BrowserModule 
    ], 
    declarations: [ 
     AppComponent, 
     AppLoadingComponent, 
     AppNotifyComponent], 
    bootstrap: [AppComponent], 
}) 

export class AppModule {} 

Answer 1

從你app.module.ts，您沒有添加到ModalModuleimports array，溶液應進口ModalModule從ngx-bootstrap並將其添加到您的進口陣列。

import { ModalModule } from 'ngx-bootstrap'; 
// or 
import { ModalModule } from 'ngx-bootstrap/modal'; 

imports: [BrowserModule, ModalModule.forRoot()], 
         ^^^^^^^^^^^^^^^^^^^^^ mention here 

參考Plunker DEMO。

似乎是一個遲到的答案，但希望它可以幫助解決您的問題。

Answer 2

從你的代碼看一眼我注意到你有BSModalService ES6 import語句在你的AppModule但不導入到角的AppModule。請將BSModalService添加到AppModule導入中，如下所示。

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { ModalModule } from 'angular2-modal'; 
import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap'; 
import { AppComponent } from './app.component'; 
import { AppSettings } from './shared/app.settings'; 
import { AppLoadingComponent } from './shared/loading/app.loading'; 
import { AppNotifyComponent } from './shared/notify/app.notify'; 
import { BsModalService } from 'ngx-bootstrap/modal'; 


@NgModule({ 
    imports: [BrowserModule, BsModalService 
], 
declarations: [ 
    AppComponent, 
    AppLoadingComponent, 
    AppNotifyComponent], 
bootstrap: [AppComponent], 
}) 

export class AppModule {}