ng-bootstrap和Angular 6:无法解析NgbModalRef的所有参数:(?，?，?，?) [英] ng-bootstrap and Angular 6: Can't resolve all parameters for NgbModalRef: (?,?,?,?)

问题描述

有人使用ng-bootstrap并遇到角度为6的以下错误

Has anyone used ng-bootstrap and come across the following error with angular 6

我已包含

imports:[NgbModule]
providers: [NgbModule, NgbModalRef]

在app.module.ts文件中

in the app.module.ts file

在我导入的ts组件文件中

inside my ts component file i have imported

import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";

 constructor(private formBuilder: FormBuilder,
        private modalService: NgbModal,
        private activeModel: NgbModalRef,
        private readonly resourceService: ResourceService,
        private readonly authService: AuthService,
        private readonly userService: UserService,
        private readonly competitionService: CompetitionService){}

open(content: any, modal?: ICompetition) {
        if (modal == undefined) {
            this.competitionFrm.setValue({
                competitionKey: null,
                centre: this.user.Centre,
                programme: "",
                competitionName: ""
            });
            this.activeModel = this.modalService.open(content,{ ariaLabelledBy: "modal-basic-title", backdrop: "static", keyboard: false });
            this.activeModel.result.then((result) => {
                    this.closeResult = `Closed with: ${result}`;
                },
                    (reason) => {
                        this.closeResult = `Dismissed with: ${reason}`;
                    });
        } else {
            this.competitionFrm.setValue({
                competitionKey: modal.competitionKey,
                centre: modal.centre,
                programme: modal.programme,
                competitionName: modal.competitionName
            });
        }
    }

saveDetails(model: any): void {
        this.competitionService.save(model).subscribe(
            data => {
                if (data.Successful === false) {
                    this.modelMsg = data.Information;
                } else {
                    this.msg = data.Information;
                    this.getCompetitions();
                    this.activeModel.close();
                }

            },
            error => this.msg = <any>error);
    }

任何人都不了解浏览器控制台窗口中显示的错误.我前段时间看到过其他一些问题，它说早在2017年就已解决，但是问题似乎仍然存在.

does anyone have any knowledge as to the error that is being displayed in the browsers console window. I have seen some other issues from a while ago saying this was solved back in 2017 however the issue still seems to be there.

此操作的目的是从保存功能内部关闭打开模式.

The purpose for this is to close the open modal from inside the save function.

非常感谢

刘易斯

更新:app.module.ts

UPDATE: app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { CommonModule, APP_BASE_HREF } from "@angular/common";
import { MatIconModule, MatFormFieldModule, MatSelectModule, MatDialogModule, } from "@angular/material";
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbModule, NgbActiveModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap';


import { AppComponent } from "./app.component";
import { FooterComponent } from "./components/footer/footer.component";
import { HeaderComponent } from "./components/header/header.component";
import { NavBarComponent } from "./components/NavBar/navbar.component";
import { HomeComponent } from "./components/home/home.component";
import { AccountManagementComponent } from "./components/accountManagement/accountManagement.component";
import { CompetitionManagementComponent } from "./components/competitionManagement/competitionManagement.component";

import { appRoutingModule } from "./app.routing";
import { UserService } from "./Service/user.service";
import { LoginService } from "./Service/login.service";
import { AuthService } from "./Service/auth.service";
import { ResourceService } from "./Service/resource.service";
import { CompetitionService } from "./Service/competition.service";


@NgModule({
  declarations: [
      AppComponent,
      FooterComponent,
      HeaderComponent,
      NavBarComponent,
      HomeComponent,
      AccountManagementComponent,
      CompetitionManagementComponent
  ],
    imports: [
      NgbModule.forRoot(),
      BrowserModule,
      appRoutingModule,
      MatIconModule,
      MatFormFieldModule,
      MatSelectModule,
      MatDialogModule,
      ReactiveFormsModule,
      FormsModule,
      CommonModule,
      BrowserAnimationsModule,
      HttpClientModule
  ],
    providers: [{ provide: APP_BASE_HREF, useValue: '/' }, UserService, LoginService, AuthService, ResourceService, CompetitionService, NgbModule, NgbModalRef],
    bootstrap: [AppComponent],
    entryComponents: [AccountManagementComponent]
})
export class AppModule { }

推荐答案

因此，解决方案不是使用NgbModalRef而是使用NgbActiveModal以及上述人员提出的建议.

So the solution to this is not to use NgbModalRef but to use NgbActiveModal with the suggestions that the guys above have suggested.

在app.module.ts文件中，您需要确保所有包含模态的组件都位于entryComponents选项中，而NgbModule.forRoot()位于imports选项中.

Within the app.module.ts file you need to ensure that all components that contain a modal are within the entryComponents options and NgbModule.forRoot() in the imports options.

@NgModule({
    imports: [
        NgbModule.forRoot()
    ],
    entryComponents: [
        AccountManagementComponent, 
        CompetitionManagementComponent
    ]
})

在组件中，您需要导入NgbActiveModal

Within the component you need to import NgbActiveModal

import {NgbModal, NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";

然后创建一个变量

activeModal: NgbActiveModal;

创建一个函数，将其用作您的open()

Create a function that will act as your open()

open(content: any) {
    this.activeModal = this.modalService.open(content,{ ariaLabelledBy: "modal-basic-title", backdrop: "static", keyboard: false });
}

在我们的示例中，模态中有一个表单，因此需要保存，然后，如果保存成功，它将关闭模态并在主页上显示一条消息.

In our case we have a form in the modal so this needs to save and then if the save is successful it will close the modal and display a msg on the main page.

save(model: any): void {
        this.dbService.save(model).subscribe(
            data => {
                if (data.Successful === false) {
                    this.modelMsg = data.Information;
                } else {
                    this.msg = data.Information;
                    this.activeModal.close();
                }

            },
            error => this.msg = <any>error);
    } 

我希望这对遇到此问题的其他人有所帮助.

I hope this helps others that come across this issue.

这篇关于ng-bootstrap和Angular 6:无法解析NgbModalRef的所有参数:(?，?，?，?)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！