@ 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的