Question

有人使用ng-bootstrap并遇到角度为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()在imports选项中。

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

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

ng-bootstrap和Angular 6：无法解析NgbModalRef的所有参数：（？，？，？，？）

1 个答案: