我正在向我的 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: 

这是我的代码的样子:

包.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 {}

#1楼 票数:14 已采纳

从您的app.module.ts ,您没有将ModalModule添加到imports array ,解决方案应该是从ngx-bootstrap导入ModalModule并将其添加到您的导入数组。

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

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

请参阅Plunker 演示

似乎是一个迟到的答案,但希望它有助于解决您的问题。

#2楼 票数:1

发布此信息,因为它可能对某人有所帮助。

如果你在你的应用中创建了不同的 NgModules,不要忘记在这些模块中导入ModalModule

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

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

#3楼 票数:0

通过快速浏览您的代码,我注意到您的 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 {}

  ask by Page F.P.T translate from so

未解决问题?本站智能推荐:

2回复

未捕获的错误:无法解析“ComponentName”的所有参数:([object Object],?)

我不知道为什么我收到错误 我正在尝试使用 ngbModal,这是我到目前为止所做的。 子句.module.ts 条款清单.html 和.ts 文件 配置文件 指望你们! 请询问是否需要更多说明。
1回复

如何将两个以上参数传递给模态ng2引导程序

我必须在对话框组件中传递一个标志。 一定是这样 我的ModalDialogComponent: 错误快照:
2回复

如何进行表单验证,我想在填写所有输入时启用提交按钮,否则应禁用它

如您所见,发送报价按钮已禁用,我只希望在两个输入框都填满后启用该按钮。 在这里,我与您分享我的代码库。 请仔细阅读代码并在stackblitz上进行修改 1.example-dialog.component.html 2.example-dialog.component.ts
1回复

在 Angular 中嵌套组件时,我可以在应用程序选择器函数中指定额外的参数吗?

app.routing.module.ts 文件 users.componenet.ts 文件 modal.component.ts 文件 ……………… …………………… 所以用户组件依赖于输入一个 id(例如 users/1001),当我尝试在模式窗口中使用它时如何将它输入
2回复

Angular 4将数据/参数传递给模态(使用ngfor)

我是角度4的新手,我正在使用ngFor在数组中显示数据。每个插件都有许多用户和我从后端获得的这些用户(id,角色等)的列表(spring boot project我正在尝试做的是显示这些用户的数量,当用户点击显示数字的按钮时,会弹出一个模态并显示这些用户的详细信息。 所以我遇到的问题是如何将{
2回复

Angular:bootstrap-modal值在第一次不绑定

我对模式绑定(父级到子级)有问题,我有一个数组,该数组是从Web服务填充的。 然后将数组传递给模式。 第一次调用时该数组为空,但在随后的调用中该数组为空,单击时,每次获得[n-1]索引值而不是[n]索引值。 这可能是什么原因? 子组件 汽车detail.html 汽车细
2回复

ngx-bootstrap-无法在单元测试中解析BsModalService的所有参数

我正在使用ngx-bootstrap(3.0.1)ModalService来显示包含组件的模式对话框 我在单元测试中有这个(由玩笑开) 顽固的错误告诉我无法解析BsModalService的所有参数:(?,?)。 我能够找到的答案是提到缺少适当的@Injectable()装饰器
2回复

无法解析所有参数

我尝试在组件中注入服务,但出现此错误: news.component.ts news.module.ts news.service.ts