Question

使用angular 4.3.4，bootstrap 3.3.7，jQuery 3.2.1，@ ng-bootstrap / ng-bootstrap似乎有一个奇怪的问题这是我一步一步的

app.module 我已经导入了@ ng-bootstrap / ng-bootstrap模块，并按照他们在文档中的建议使用了导入NgbModule.forRoot（）我还创建了名为＆＃34; ModalModule＆＃34;的模块。我已将其代码粘贴在此

下面

import { NgModule } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
//import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';
import { HttpModule } from '@angular/http';
import { routing } from './app.routing';
import { CertificationComponent } from './Components/certification.component';
import {MemberBasicInformation} from './Services/memberBasicInformation.service'
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {ModalModule} from './Modals/app.modals.module'
@NgModule({
    imports: [BrowserModule, ReactiveFormsModule, HttpModule, routing, /*Ng2Bs3ModalModule*/ NgbModule.forRoot(), ModalModule],
    declarations: [AppComponent, CertificationComponent],
    providers: [{ provide: APP_BASE_HREF, useValue: '/' }, MemberBasicInformation],
    bootstrap: [AppComponent]

})
export class AppModule { }

ModalModule 我在这里只使用了NgbModule的导入，因为它在文档中已经建议，因为forRoot只能使用一次。我还创建了名为UserNotAllowedToProceed的模态组件，其代码就在这个模块下面

import {NgModule} from '@angular/core'
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {UserNotAllowedToProceed} from "./userIsNotAllowedToProceed.modal"


@NgModule({
    imports: [NgbModule],
    declarations: [UserNotAllowedToProceed],
    entryComponents: [UserNotAllowedToProceed]
})

export class ModalModule { }

UserNotAllowedToProceed模式组件

import { Component, Input } from "@angular/core";
import { NgbModal, ModalDismissReasons, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'ngbd-modal-content',
    template: `
<div class="modal-header">
    <h4 class="modal-title">Hi there!</h4>
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
        <p>Hello, {{name}}!</p>
    </div>
<div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>
`
})

export class UserNotAllowedToProceed {
    @Input() name: string;
    constructor(public activeModal: NgbActiveModal) { }

所以这结束了我对@ ng-bootstrap / ng-bootstrap的设置过程，现在这就是我在组件中使用它的方式

import { Component, OnInit, ViewChild, Input } from "@angular/core";
import { MemberBasicInformation } from "../Services/memberBasicInformation.service";
import { IMemberBasicInformationModel } from '../Models/memberBasicInformation.model';
import { NgbModal, ModalDismissReasons, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { UserNotAllowedToProceed} from '../Modals/userIsNotAllowedToProceed.modal'
@Component({
    moduleId: module.id,
    template: `<strong>{{data.membershipStatus}}</strong><br>
<button class="btn btn-lg btn-outline-primary" (click)="displayModal();">Launch demo modal</button>
`
})

export class CertificationComponent implements OnInit{
    data: IMemberBasicInformationModel = {membershipStatus: "", firstName:"", lastName:""};
    ngOnInit(): void {
        this.memberBasicInformationService.getMemberBasicData('343434343').subscribe(x => {
            this.data = x;
            console.log(this.data);
            if (this.data.membershipStatus.toLowerCase() != "Paid") {
                this.displayModal();
            }
        });
    }

    constructor(private memberBasicInformationService: MemberBasicInformation, private modalService: NgbModal) {

    }

    displayModal(): void {
        const modalRef = this.modalService.open(UserNotAllowedToProceed);
        modalRef.componentInstance.name = "world";
    }
}

我正在调用我的服务OnInit并根据我得到的数据，我打算弹出一个带有信息的模态。

问题是：模态会弹出，但会立即关闭。当我在chrome中调试并在displayModal（）方法的末尾放置一个断点时，我可以看到该模态即将出现，但是当我继续执行时，它会自行关闭。我也尝试按下按钮，它也会在按钮点击时做同样的事情（它打开一个模态，然后关闭它）

有人可以建议我解决这个问题或建议任何替代模态解决方案吗？我还需要使用模态提交表单，所以它需要非常好的模态... 非常感谢。

Answer 1

@ ng-bootstrap / ng-bootstrap使用bootstrap 4.0.0-beta而没有JQuery

@ ng-bootstrap / ng-bootstrap模态打开和关闭

1 个答案: