Question

我正在尝试从组件中打开一个模态，并使用＆＃34; .open＆＃34;将组件传递给模态。根据@ ng-bootstrap文档的方法，但我在角度cli中得到的错误.open不是方法

我还添加了＆＃34; NgbModule.forRoot（）＆＃34;在NgbModule的导入中，按照文档的所有步骤进行操作，但仍然出现错误。

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

这是我的模态组件，我想要打开＆＃34;打开＆＃34;方法

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的部分。

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

抱歉没有提前发布整个代码。谢谢。

Answer 1

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

您有：

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

更改为

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

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

角度cli显示错误＆＃34;属性＆＃39;打开＆＃39;类型＆＃39; NgbModule＆＃39;＆＃34;使用NgbModule时

1 个答案: