模态在 ng bootstrap 中不可见

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"...

相关代码：

app.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。如果是，您应该切换到 bootstrap 4 或复制它们的类。

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