角度 cli 在使用 NgbModule 时显示错误"类型'Ngb模块'上不存在属性'打开'"

Question

我正在尝试根据@ng引导程序的文档使用".open"方法从组件打开模态并将组件传递到模态中，但我在角度 CLI 中收到错误，即 .open 不是一种方法

我还在 NgbModule 的导入中添加了"NgbModule.forRoot(("，并按照文档中的所有步骤进行操作，但仍然收到错误。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Angular2SocialLoginModule } from "angular2-social-login";
import { AppComponent } from './app.component';
import { AppRoutingModule } from "./app-routing.module";
import { LoginModule } from "./login/login.module";
import { MaterialModule } from '@angular/material';
import { ModalDirective } from 'ngx-bootstrap/modal';
import { ModalModule } from 'ngx-bootstrap/modal';
import { ConfigService } from "./config-service";
import { ErrorMessageService } from "./share/error-messages.service"
import { MdTooltipModule } from '@angular/material';
import { CustomProfileComponent } from './custom-profile/custom-profile.component';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule, JsonpModule }    from '@angular/http';
import { S3UploadService } from "./custom-profile/fileupload.component.service";
import {HomeModule } from "./Home/home-component-module";
import { ProfileComponent } from './profile/profile.component';
import {ConfirmPopupService} from "./confirm-popup.service";

import 'hammerjs';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';    
@NgModule({
declarations: [
AppComponent,
CustomProfileComponent],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
JsonpModule,
FormsModule,
MaterialModule,
AppRoutingModule,
LoginModule,
MdTooltipModule,
Angular2SocialLoginModule,
HomeModule,
NgbModule.forRoot()
],
providers: [ConfigService, ErrorMessageService,S3UploadService],
bootstrap: [AppComponent]
})
export class AppModule { }
Angular2SocialLoginModule.loadProvidersScripts(providers);

这是我的模态组件，我想传递给"打开"方法

confirmation.component.ts

import { Component, Input } from "@angular/core";
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Observable, Subject, ReplaySubject } from "rxjs";

@Component({
selector: 'ngbd-modal-confirm',
template: `
<div class="modal-header">
<h4 class="modal-title">Confirm {{name}}</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')" style="float:right">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to confirm this {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="yesClick()">YES</button>
<button type="button" class="btn btn-secondary" (click)="noClick()">NO</button>
</div>
`
})
export class NgbdModalConfirmationComponent {
@Input() name;
@Input() isConfirmed = new Subject();
constructor(public activeModal: NgbActiveModal) { }
yesClick() {
this.isConfirmed.next(true);
console.log(this.isConfirmed);
this.activeModal.close('Close click');
}
noClick() {
this.isConfirmed.next(false);
console.log(this.isConfirmed);
this.activeModal.close('Close click');
}
}

以及我想在其中使用它的组件。

profile.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from "@angular/router"
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// import { ErrorMessageService } from "../share/error-messages.service";
import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from "@angular/forms";
import{ProfileService} from './profile-component.service';
import {ConfirmPopupService} from "../confirm-popup.service";
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {NgbdModalConfirmationComponent} from '../confirmation.component';
@Component({
//selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css'],
providers: [ProfileService,ConfirmPopupService]
})
export class ProfileComponent implements OnInit {
constructor(private profileService: ProfileService,private _fb: FormBuilder,private modalService:NgbModule) {
}

deleteEdu(obj){
const modalRef = this.modalService.open(NgbdModalConfirmationComponent);
modalRef.componentInstance.name = 'KYC';
modalRef.componentInstance.isConfirmed.subscribe(value => {
console.log(value);
if(value)
{
//perform delete operation
}
else{
//dont perform delete operation
}
});
}

我还没有发布profile.component.ts的整个代码，因为它很长，只有我想使用Ngbmodule的部分已经发布。

所以基本上我想做的是当用户单击删除时，如果用户单击"是"，则会出现确认模式，然后删除操作将被执行，否则什么都不会发生。

很抱歉没有早点发布整个代码。谢谢。

Answer 1

我也有类似的问题。在您的profile.component.ts中，您正在导入NgbModule.尝试将其更改为NgbModal，看看是否可以修复错误。

你有：

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

更改为

import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

然后更改构造函数。也许这会有所帮助。