模态在ng引导中不可见

Question

当我激活模态时，它或模态背景都不显示为可见。我可以在开发工具中看到元素正在被创建，并且当我在显示模式的地方以外点击时正在被正确销毁。

我试图复制我使用下列这里显示https://ng-bootstrap.github.io/app/components/modal/demos/basic/plnkr.html

的例子：

@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.25（https://ng-bootstrap.github.io/#/home）

@angular/common": "4.x"...

相关代码：

应用。 module.ts：

个

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

@NgModule({ 
    bootstrap: [App], 
    declarations: [ 
    App 
    ], 
    imports: [ // import Angular's modules 
    BrowserModule, 
    ... 
    NgbModule.forRoot(), 
    ] 
... 

dashsboard.module.ts：

import { NgbDatepickerModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap'; 

@NgModule({ 
    imports: [ 
    ... 
    NgbDatepickerModule, 
    NgbModalModule 
    ], 
    declarations: [ 
    DashboardComponent, 
    ], 
    ... 
}) 

dashboard.component.ts：

import { NgbDateStruct, NgbModal } from "@ng-bootstrap/ng-bootstrap"; 

export class DashboardComponent { 
    ... 
    constructor(_modalService: NgbModal) {...} 

    public showModal(content) { 
    this._datePickerService.open(content).result.then((result) => { 
     Logger.debug('show result:', result); 
    }, (reason) => { 
     Logger.debug('dismissal reason', reason); 
    }) 
    } 
} 

dashboard.component.html：

<input placeholder="from" (click)="showModal(content)"> 

... 

<ng-template #content let-c="close" let-d="dismiss"> 
    <div class="modal-header"> 
    <h4 class="modal-title">Modal title</h4> 
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> 
     <span aria-hidden="true">&times;</span> 
    </button> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body&hellip;</p> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button> 
    </div> 
</ng-template> 

Answer 1

也许你正在使用bootstrap 3而不是bootstap 4。如果是的话，你应该切换到引导程序4或复制它们的类。

在仔细阅读代码后，您正在使用this._datePickerService打开模式，您应该使用this._modalService.open（content）;