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

Question

我似乎对使用 angular 4.3.4、bootstrap 3.3.7、jQuery 3.2.1 的@ng-bootstrap/ng-bootstrap 有奇怪的问题这是我的 stwp-by-step

app.module 我已经导入了 @ng-bootstrap/ng-bootstrap 模块并按照他们在文档中的建议使用了 imports NgbModule.forRoot() 我还创建了名为 "ModalModule" 的模块。我已将其代码粘贴到下面

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 { }

模态模块 我在这里只对 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 模态自己打开和关闭

@ng-bootstrap/ng-bootstrap modal opens and closes itself

bootstrap-modal

ng-bootstrap

angular