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

Question

我似乎有一个奇怪的问题，使用角度4.3.4，引导3.3.7，jQuery 3.2.1 @ ng-bootstrap/ng-bootstrap这里是什么我有stwp一步

app.module 我已导入@ NG-自举/ NG-引导模块和所使用的进口NgbModule.forRoot（），因为它们在其文档 在建议我也已经创建模块称为“ModalModule”。我已经粘贴下面我在这里采用进口仅NgbModule，因为它是在其文档中suggetsed因为forRoot只能使用一次这个

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 其代码。 我也创建了一个叫做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-引导/ NG-引导，现在这是我如何使用它在我的组件

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"; 
    } 
} 

我cal根据我得到的数据，我打算使用一个信息弹出一个Modal。

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

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

Answer 1

@ NG-引导/ NG-引导使用引导4.0.0-β和无JQuery的