Question

我在我的spfx angular 2应用程序中添加了一个模态。我试图通过http://valor-software.com/ngx-bootstrap/#/modals关注ngx-bootstrap-modal。但是我收到了这个错误：

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开始，您未将ModalModule添加到imports 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

发布此信息可能会帮助某人。

如果您在应用中创建了其他NgModule，请不要忘记在这些模块中导入ModalModule。

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

@NgModule({
  imports: [    
    ModalModule.forRoot()    
  ],
  declarations: [
    ExampleComponent,    
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class ExampleModule {}

Answer 3

通过快速浏览一下代码，我注意到你的AppModule中有BSModalService的ES6导入语句，但它没有导入到你的角度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 {}

无法解析BsModalService的所有参数

3 个答案: