angular - ng-bootstrap 和 Angular 6 : Can't resolve all parameters for NgbModalRef: (? ,?,?,?)

Question

有谁使用过 ng-bootstrap 并在 Angular 6 中遇到以下错误

我已经包含

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

在app.module.ts文件中

在我导入的 ts 组件文件中

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 年解决，但问题似乎仍然存在。

这样做的目的是从保存函数内部关闭打开的模式。

提前非常感谢

刘易斯

更新: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 { }

Answer 1

因此，解决此问题的方法不是使用 NgbModalRef ，而是使用 NgbActiveModal 以及上面的建议。

在 app.module.ts 文件中，您需要确保包含模式的所有组件都在 entryComponents 选项和 NgbModule.forRoot() 内 在导入 选项中。

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

在组件中您需要导入 NgbActiveModal

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

然后创建一个变量

activeModal: NgbActiveModal;

创建一个充当 open() 的函数

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

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

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

我希望这可以帮助遇到此问题的其他人。